CSS and CSS-3 Selectors

Initially CSS use tag, class and id selectors.
However CSS 2.1 adds pseudo-elements, pseudo-classes, and combinators.
And now With CSS3, we can target almost any element on the page with a wide range of selectors


Here we will discuss all CSS and CSS3 selectors.

Rational Selectors

Rational Selectors targets elements based on their relationship with another element.

Selector CSS Code Use CSS Level

Descendant Selector

div p{ } Target all p tags that are descendent(child, grandchild, great grandchild, and so on) of div tag. 1

Child Selector

div>p{ } This selector matches only direct child of element 2

Adjacent Sibling

h4+p{ } This selector matches p tag next to h4 and both sharing same parent. That Means p should comes directly after h4. 2

General Sibling

h3~p{ } This selector matches all P elements exactly after h3 element. 3

General Sibling i.e. ( A~B) selector will only in HTML-5 Supported Browsers. IE 8 and lesser doesn't support this selector.


Attribute Selectors

Attribute Selectors were introduced in css2. They targets matching elements based on their attributes.

CSS Code Use CSS Level

E[attr]{}

Target only E Element or Elements having exact case-insensitive attribute value. For exp input with disabled attribute,
input[ disabled]{ cursor:not-allowed }
2

E[attr="value"]{}

This selector matches only Element with exact attribute and value. For exp, input type checkbox only,
input[ type="checkbox" ]
2

E[attr~="foo"]{}

This selector matches only Elements with exact Attribute with multiple values separated by white-space, and one of the value is exactly equal to "foo". 2

E[attr|="foo"]{}

This selector matches only Elements with exact Attribute with value separated by hyphen (-) , and one of the value is exactly equal to "foo". 2

E[attr^="foo"]{}

This selector matches only element E with attribute value starting exactly with foo. For exp, div having class name starting with "col",
div[ class^="col" ]
3

E[attr$="value"]{}

This selector matches only element E with attribute value ending exactly with foo. For exp, div having class name ending with "wrap",
div[ class$="wrap" ]
3

E[attr*="value"]{}

This selector matches only element E with atttribute value contains the substring "foo". For exp, div having class name with substring "md",
div[ class*="md" ]
3

E[attr^=foo"]{}, E[attr$=foo"]{} and E[attr*=foo"]{} attribute selectors will only in HTML-5 Supported Browsers. IE 8 and lesser doesn't support these selectors.


Pseudo Selectors

CSS Pseudo Selectors are classified in Pseudo Class and pseudo elements.

Since CSS1 & CSS2, we are using Pseudo Selectors .

CSS Code Use CSS Level

E:link{}

E (Anchor) element with a hyperlink, and which is not visited yet. 1

E:visited{}

E (Anchor) element with a hyperlink, and which is already visited as per browsers history. 1

E:hover{}

Change style on mouseover state of E element. Exp 1 and 2

E:focus{}

Change style on focus state of E element. Generally All Form Controls supports focus state. 1 and 2

E:active{}

Change style on mouse key down state of E element. <button>, <input type="submit">, <button type="reset"> supports this. Exp 1 and 2

:enable{}

A user interface element which is enable. exp 3

:disable{}

A user interface element that is disabled. exp

<style>
    input[ type="text"]:disabled{ cursor:not-allowed }
</style>

 <label><input type="text" value="Disabled Field" disabled>:Enter Country </label>   
                         
3

:read-only{}

A user interface element that is disabled. exp

<style>
    input[ type="text"]:readonly{ cursor:not-allowed }
</style>

 <label><input type="text" value="Read Only Field" readonly>:Enter Country </label>   
                         
3

E:checked{}

For Checkbox and radio buttons that are checked.
exp

<style>
    input[ type="checkbox"]~span{ color:red }
    input[ type="checkbox"]:checked~span{ color:green }
</style>

 <label><input type="checkbox">: <span>I Agree</span></label>   
                         
3

:valid{}

Applicable to elements that are valid, based on their type and pattern. For exp

<style>
 input[ type="text"]:valid{ box-shadow: 0px 0px 5px 1px green  }
 input[ type="text"]:invalid{ box-shadow: 0px 0px 5px 1px red }
</style>

 <label><input type="text" pattern="^[0-9]{4}$" required maxlength="4">: Enter ATM Pin</label>     
			             
3

:invalid{}

Applicable to elements that are invalid, based on their type and pattern. For exp

<style>
 input[ type="text"]:valid{ box-shadow: 0px 0px 5px 1px green  }
 input[ type="text"]:invalid{ box-shadow: 0px 0px 5px 1px red }
</style>

 <label><input type="text" pattern="^[0-9]{4}$" required maxlength="4">: Enter ATM Pin</label>     
			             
3

:required{}

Applicable to input elements havingrequired attribute. For exp

<style>
 input:required{ box-shadow: 0px 0px 5px 1px #ffae15  }
</style>

 <label><input type="text" required placeholder="Enter name">: Enter Name</label>     
			             
3

:optional{}

Applicable to input elements that do not have required attribute. For exp

<style>
 input:optional{ box-shadow: 0px 0px 5px 1px #e83edb  }
</style>

 <label><input type="text" placeholder="Enter name">: Enter Name</label>     
			             
3

:in-range{}

Applicable to range and input type number element when the value is in-range . For exp

<style>
 input:in-range{ box-shadow: 0px 0px 5px 1px green  }
</style>

 <label><input required type="number" min="18" max="50" </label>     
			             
3

:out-of-range{}

Applicable to range and input type number element when the value is out-of-range . For exp

<style>
 input:out-of-range{ box-shadow: 0px 0px 5px 1px red  }
</style>

 <label><input required type="number" min="18" max="50" </label>     
			             
3

Browsers Compatibility

:hover is not supported in IE-6 and below. IE-7 and below doesn't supports :focus. However all Level 1 and Level 2 selectors are supported in IE-8 except(:checked, :enabled, :disabled, & :target). Good News is tha- IE-9 and above supports all CSS Level selectors.


Structural Pseudo-classes

Using Structural Pseudo-classes, we can target any element based on their position .

CSS Code Use CSS Level
E:root an E Element, root of the document. 2
:first-child Targets only first child Element of parent. For Exp
  • List 1
  • List 2
  • List 3

<style>
 ul li:first-child{ color:#a94442}
</style>

 <ul>
     <li>List 1</li>
     <li>List 2</li>
     <li>List 3</li>
 </ul>       
                        
2
:first-line Targets only first line of Element. For Exp,

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ducimus delectus recusandae nisi dolore tenetur doloremque voluptas, ad inventore earum quos harum illo mollitia magnam velit cum asperiores. Earum, voluptatem.


<style>
 p:first-line{ color:red}
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit magnam ad architecto magni optio alias quibusdam aliquam incidunt eligendi tempore quam nobis nisi non, similique minus, nihil deleniti neque.
</p>              
                        
1
:first-letter targets only first letter of Element, For exp,

Lorem ipsum dolor sit amet.


<style>
 p:first-letter{ color:red; font-size:2em}
</style>

<p>Lorem ipsum dolor sit amet.
</p>              
                        
1
:last-child Targets only last child Element of parent. For Exp
  • List 1
  • List 2
  • List 3

<style>
 ul li:last-child{ color:#a94442}
</style>

 <ul>
     <li>List 1</li>
     <li>List 2</li>
     <li>List 3</li>
 </ul>       
                        
3
:nth-child(n) Targets only nth child of parent element. n is a numeric value. For Exp
  • List 1
  • List 2
  • List 3
  • List 4
  • List 5

<style>
 ul li:nth-child(2){ color:#a94442}
 ul li:nth-child(5){ color:#31708f}
</style>

 <ul>
     <li>List 1</li>
     <li>List 2</li>
     <li>List 3</li>
     <li>List 4</li>
     <li>List 5</li>
 </ul>       
                        
3
:nth-child(odd) Targets only odd children of parent element. n is a numeric value. For Exp
  • List 1
  • List 2
  • List 3
  • List 4

<style>
 ul li:nth-child(odd){ color:#a94442}
</style>

 <ul>
     <li>List 1</li>
     <li>List 2</li>
     <li>List 3</li>
     <li>List 4</li>
 </ul>       
                        
3
:nth-child(even) Targets only even children of parent element, ie 2,4,6, etc. For Exp
  • List 1
  • List 2
  • List 3
  • List 4

<style>
 ul li:nth-child(even){ color:#a94442}
</style>

 <ul>
     <li>List 1</li>
     <li>List 2</li>
     <li>List 3</li>
     <li>List 4</li>
 </ul>       
                        
3
:nth-of-type(n) Targets only nth sibling of type n, starting from first. For Exp
  • List 1
  • List 2
  • List 3
  • List 4
  • List 5
  • List 6
  • List 7

<style>
 ul li:nth-of-type(3n+1){ color:#a94442}
</style>

 <ul>
     <li>List 1</li>
     <li>List 2</li>
     <li>List 3</li>
     <li>List 4</li>
     <li>List 5</li>
     <li>List 6</li>
     <li>List 7</li>
 </ul>       
                        
3
:nth-last-of-type(n) Targets only nth sibling of element, starting from last. For Exp
  • List 1
  • List 2
  • List 3
  • List 4
  • List 5
  • List 6
  • List 7

<style>
 ul li:nth-last-of-type(3n){ color:#a94442}
</style>

 <ul>
     <li>List 1</li>
     <li>List 2</li>
     <li>List 3</li>
     <li>List 4</li>
     <li>List 5</li>
     <li>List 6</li>
     <li>List 7</li>
 </ul>       
                        
3
:empty An element having no child element. For Exp

This is a para with content.

Another para with content.


<style>
 p:empty{ border:solid 2px red}
</style>

<p>This is a para with content</p>                            
<p></p>                            
<p>Another para withh content.</p>                            
<p></p>                            
                         
                        
3
:lang() An element having lang attribute with given value. For Exp

Hello frind, how do you do?.

Hola amigo, ¿cómo se hace?


<style>
 p:lang(es){ color:red; font-style:italic}
</style>

<p>This is a para with content</p>                            
<p lang="es">Hola amigo, ¿cómo se hace?</p>                            
                    
3

:first-child, :first-letter, :first-line will be supported in IE 7 and 8. But Level 3 selectors will supported only in IE 9 and above browsers.