Clever Geek Handbook

Selector not working in css?

Below is the code I tried

Html

<div>
     <span>Span1</span>
     <span>Span12</span>
     <span>Span13</span>
</div> 

<div>
     <span>Span1</span>
     <span>Span12</span>
     <span>Span13</span>
</div> 

<span>Span2</span> 
<span>Span3</span>

CSS

 :not(div>span)
   {
      color : #ff0000;
   }

I want the gaps with span2

and to span3

be red using no selector

Check Js Fiddle

http://jsfiddle.net/82KwV/

+1


source to share


2 answers


:not

takes a simple selector as an argument. div > span

is not a simple selector, so it cannot be used in this context. As a result, you cannot say "I want everything that is not spacing with the parent div red" in CSS and you have to compromise.

One possibility is to target specific subsets of the general case. For example, the subtle different "all idle that has no div parent" correspond to:

:not(div) > span { color: red }


In more complex scenarios this approach may not be feasible (for example, you cannot use the above div, p

instead div

), in which case you will have to refer to other parameters, such as the "do / undo" trick:

span { color: red }
div > span { color: inherit }

This schema can easily be extended to p > span, div > span

, but of course there is a tradeoff: these rules can override something else in your stylesheets.

+7


source


:not

does not allow this type of selector. Best use

body > span { color: red }


This is cleaner than fixing it with a few rules.

0


source






More articles:


All Articles