CSS Selector Pattern to Middle Element [duplicate]

Question

This question already has answers here:

Is there a CSS parent selector? (33 answers)

Closed 9 years ago.

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?

Answer 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(_____)