CODEWITHSUNDEEP
csscss-selectors
myol
myol

Reputation: 9838

All children of class within parent with sibling

I have css which targets the child of a parent if the parent has a sibling of a certain class;

.sibling + .parent > [class^='child'] { style }

nav

-sibling
-parent
    -child1           <-- styled
    -child1           <-- styled
         -child2      <-- not styled

This works nicely for all the children on the first level, but I also want to target all grandchildren, greatgrandchildren etc etc

I don't want to use 

.sibling + .parent > [class^='child'],
.sibling + .parent > [class^='child'] > [class^='child'],
.sibling + .parent > [class^='child'] > [class^='child'] > [class^='child'] { 
    style 
}

As this still only limits a few levels. How can I change this to be unlimited?

Upvotes: 0

Views: 83

Answers (2)

BoltClock
BoltClock

Reputation: 723739

This is what the descendant combinator is for — it targets descendants regardless of nesting level:

.sibling + .parent [class^='child']

(It is for this reason that "child" is a poor name for the elements you are targeting, but I'm going to assume it is just for illustration.)

Upvotes: 1

Axel
Axel

Reputation: 10772

Either specify the element div which will target the rest of the children divs:

.parent + .sibling > [class^='child'] div { style }

or use an asterisk * to target all children elements regardless of their tags.

.parent + .sibling > [class^='child'] * { style }

Upvotes: 0

Related Questions