1

I'm in a situation where a pre-processor that I can't control is trying to help me and I'm trying to format something by using some clever CSS to work around it.

What I'm entering is:

    <span class="foo">Some Text</span>

What it is generating is (remember, I have no control over this):

    <p>
      <span class="foo">Some Text</span>
    </p>

Further complicating matters:

  • the pre-processor has injected generic CSS of its own for the P tag after my own styles, forcing unwanted styling around my text, and
  • this is actually desired behavior in other places (my span is the exception)

As such, I'm wanting to use a selector that selects P elements where my SPAN tag is inside. This is a plain style-sheet file, not jQuery where such things would be trivial.

In looking at http://www.w3.org/TR/CSS2/selector.html, it appears that E > F looks close, but it selects element F, not E.

I've got a hacked solution where I inject bogus elements with a class before my auto-wrapped spans, and then use the E.hack + F selector to grab the P element and fix the style, but adding an element just to do this feels wrong. I'm concerned I'm missing the obvious.

How would you select the P elements that have a particular span in them and not the span iteself?

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Walt Stoneburner
  • 2,397
  • 4
  • 21
  • 36
  • agreed. There is no Parent selector in CSS. Styles only "cascade" down, not up. what is the pre-processor you are using? – Chris L May 08 '14 at 15:03
  • What styles are appearing around your text that you want to change/remove? – gotohales May 08 '14 at 15:05
  • This extra-element prior to `.foo` is a smart solution imho. You've a constraint that shouldn't exist in an ideal world but well, at the end of the day you still need a workaround and CSS won't be of any help here. Your solution doesn't depend on JS and is already there at load time... Just make sure this extra-element is empty and void of semantics (another span is the ideal candidate) – FelipeAls May 08 '14 at 16:04
  • Chris M - it's some homegrown custom one that I don't have access to. mookamafoob - it's some vertical spacing issue that screws up final layout, but I don't think it's relevant; whoever added the parent CSS selector link was right on target, thanks. @FelipeAls - thanks for the confirmation, it is working perfectly, just wanted to make sure there wasn't a better way. – Walt Stoneburner May 08 '14 at 16:40

1 Answers1

1

It looks like there is no parent selector.

http://css-tricks.com/parent-selectors-in-css/

Your best/only option without the html workaround you mentioned might be to set the style using jquery.

$(".foo").parent("p").css(_____)
thogue
  • 144
  • 5
  • Yes, unfortunately jQuery isn't available and since my content is the middle of some other stream, I can't count on others not doing the same or conflicting versions. The .parent() was the trivial solution I'd mentioned. – Walt Stoneburner May 08 '14 at 16:41