Question

I have some markup like this:

<div class="field">
    <div class="selector" id="uniform-blablabla">
        [select tag markup]
    </div>
<div>
<div class="field">
    <input type="text" id="etcetc"
</div>

I’m looking for a css selector that will select the input tag above based on the fact that its containing .field div is preceded by a .field div containing a div with a .selector class, as in the markup above. I’ve tried

div.field > .selector + div.field > input

but that doesn’t work, I assume because the input tag isn’t a sibling of the div tag with the .selector class and I really need their parents to be siblings.

I’ve read up on some of the interesting reasons that CSS doesn’t support any sort of “parent” selector, and I can see why. I’m wondering if there’s another way to accomplish this, short of putting a class on each input tag that follows a selector. Is there?

Answer 1

I’m wondering if there’s another way to accomplish this, short of putting a class on each input tag that follows a selector. Is there?

Not with a CSS selector. You will have to add an extra class based on the preceding sibling div having div.selector as a child.