Normally in CSS the way to select your desired elements is based on a property or properties which the element has. For example, you might want to select all DIV elements with class “myspecialclass”. However, suppose that you want to select an element in CSS based on the property which an element DOES NOT have. The code below will show you how to achieve this.
The CSS Code
|
1 2 |
/* select 'element with class .column' which is a descendant of 'element with class content that does not have class blog_style*/ .content:not(.blog_style) .column {background:red;} |
The HTML Code
In the example below, only the second instance will be selected and made red, because this is the only element which matches the “Not” selector of our CSS above
|
1 2 3 4 5 6 7 8 9 |
<div class="content blog_style"> <div class="column">This is a column</div> </div> <div class="content"> <div class="column">This is a column</div><!--CSS applies because 'ancestor with class content' DOES NOT 'have class blog_style' --> </div> <div class="content blog_style"> <div class="column">This is a column</div> </div> |
