CSS - Is There a Cousin Selector

CSS - is there a cousin selector?

CSS works down the DOM (although selectors are processed backwards), so you can't navigate up an element tree and then back down to reach an element's cousin. You can only either operate on the same level of elements (only going forward), or go down.

You'll have to go with your jQuery solution.

Is it possible to select the child of my parent's sibling?

No, there's no way to select a "cousin" with pure CSS.

If #header were after .content, then you could select .button from a pseudo-class of .content -- an "aunt/uncle" -- using the adjacent sibling combinator (+) like this:

.content:hover + #header .button{/* styles */}

But even then, you're not able to select .button from a pseudo-class of .main (the "cousin")

Selenium CSS Selector: select child element using another child as unique identifier (cousin selector?)

The ~ combinator represents two elements that are siblings only. As you note, the two elements in question are not direct siblings, because each element has its own set of ancestors. They are only related by the .list-item element, which is much further up the hierarchy.

Since CSS selectors cannot ascend, so to speak, nor is there a selector like :contains() but for attribute values, you will want to use XPath instead:

xpath=//div[@class='my-groups-popup']/div/div[descendant::input[@value='The Second Input']]//button[1]

Alternatively, if we study your HTML snippet, we can see that .my-groups-popup .listbox-container only has .list-item elements as children, and each of these children has exactly one input and one set of button controls. If we can assume that the HTML structure for .my-groups-popup will always follow this pattern, we can use :nth-child() on the .list-item elements to find the button control corresponding to the appropriate input:

css=.my-groups-popup .list-item:nth-child(2) .controls button.move-up

Css nth-child ignore divs - javascript nth-child equivalent for cousin elements

:nth-child() and :nth-of-type() operate on siblings, so targeting all of the p's on the page together won't work because they aren't siblings.

To target that paragraph, I would target the div you want and use :nth-child() inside of that div to select the p relative to its siblings.

#yellow div:last-child p:first-child {  background-color: yellow;}

  <div id="yellow">    <div>      <p>This should not be yellow.</p>      <p>This should not be yellow.</p>    </div>
    <br>
    <div>      <p>This should be yellow.</p>      <p>This should not be yellow.</p>    </div>  </div>