Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS limit depth styles can be applied to elements

Does anybody know of a solution to limit the child depth when selecting an element with CSS?

Example:

.my-class div div:end(styles:here)

This would prevent having to add CSS classes to every single second div in the page while preventing styles from being passed on down to the third fourth etc. child.

like image 843
Code Junkie Avatar asked Aug 11 '11 18:08

Code Junkie


1 Answers

You can specifically tell it to search only 1 level deeper with the > operator.

Consider the following example:

#target > p > span {
    background: red;
}

This will search #target for a direct child element <p>, and within that element, will search for a direct child element <span>. So if there is a nested <p> element, and a span inside of it, it won't be affected.

A very common use is for nested list items, where you want the main list to style, but the secondary list to not.

ul#parent > li /* Direct descendant. */
ul#parent > li > ul > li /* 2 levels deep descendant. */
like image 78
Madara's Ghost Avatar answered Sep 30 '22 14:09

Madara's Ghost