CSS3 Selectors

Written By: Avinash Malhotra

Updated on:

CSS3 Tutorial rating by Yash ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 186 reviews
  1. Home
  2. Frontend
  3. CSS
  4. CSS3 Selectors
  1. CSS3 Selectors
  2. Rational Selectors
  3. Attribute Selectors
  4. Pseudo Selectors
  5. Structural Pseudo

CSS3 Selectors

CSS3 Selectors includes all css selectors till CSS3. CSS3 Selectors list includes Rational Selectors, Combinator, Grouping and Pseudo Selectors.

Earlier CSS versions use Type, class, id and child selectors. CSS 2 adds more pseudo-elements, pseudo-classes, and combinator selectors. And now With CSS3, we can target almost any element with wide range of selectors options. Evan we have updated CSS Selectors level 4 in this article.

CSS3 Selectors are part of HTML5.

Here we will discuss all CSS, CSS2, CSS2.1, CSS3 and css selectors level 4 in detail.

CSS Selectors List

  1. Rational Selectors
  2. Attribute Selectors
  3. Pseudo Selectors
  4. Structural Pseudo Selectors

There are no selectors to target parent and previous element sibling in css.

Rational Selectors or Combinator

Rational Selectors or Combinator targets elements based on their relationship with another elements. These selectors were first introduced in CSS1 and then again in css2 and css3.

CSS Rational Selectors or Combinator
Selector CSS Code Use CSS Level

Descendant Selector

 div p{ } Target all p tags inside div. That includes all p elements that are descendant (child, grandchild, great-grandchild, and so on) of div. 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. This means p should come 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 work only in HTML5 Supported Browsers. IE 8 and lesser doesn't support this selector.

Attribute Selectors

Attribute Selectors were introduced in css level 2 or css2. Attribute Selectors targets matching elements based on the attribute and attributes value. Attribute Selectors are used using Brackets []. Attribute Selectors can target both attributes with value or boolean attributes.

CSS Attribute Selectors
CSS Selector 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 attribute value contains the substring "foo". For exp, div having class name with substring "md",
div[ class*="md" ]		 3

E[attr="value" i]{}

 This selector matches only element E with attribute value is "value" or "VALUE". i means incase-sensitive. For exp, div having class name "col" or "COL",
div[ class="col" i]		 4

E[attr="value" s]{}

 This selector matches only element E with attribute value equals "value" only. For exp, div having class name "col",
div[ class="col" s]		 4

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 as Pseudo Class and Pseudo elements. These selectors were first introduced in css1, and then again in css2 and css3. CSS Pseudo Selectors are called using Colon :. In CSS3, we use double colons :: for pseudo elements, but single colon is also supported.

CSS 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 or unchecked. 

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

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

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

 <label><input type="radio" name="gender">: <span>Male</span></label>   
 <label><input type="radio" name="gender">: <span>Female</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

:focus-within

 :focus-within pseudo selector select the element when the child element is being focused.

Focus on inputs below


<style>  
    .box{ 
        border:1px solid; 
        margin:10px; 
        padding:10px; 
        background:#fff;
    }
    .box:focus-within{ 
        background:#5c97d5;
    }
</style> 

<div class="box"><input type="text"></div> 
<div class="box"><input type="text"></div> 
<div class="box"><input type="text"></div>
4

:target

 :target pseudo selector
Sec 1
Sec 2
Sec 3
        
<style>
    .section{
        background:#ccc; 
        border:1px solid;
        padding:10px;
        margin:10px;
     }
    .section:target{ background:#333; color:#fff}
</style>
   
<a href="#sec1">Sec 1</a>
<a href="#sec2">Sec 2</a>
<a href="#sec3">Sec 3</a>

<div class="section" id="sec1">Sec 1</div>  
<div class="section" id="sec2">Sec 2</div>  
<div class="section" id="sec3">Sec 3</div>
3
:marker

change color of bullets or numbers of lists

  • List Item
  • List Item
  1. List Item
  2. List Item
<style> 
ul li::marker{
        color:#00f
}
ol li::marker{
    color:#a00;
}
</style>
4
:is()

:is() function selector

Heading 1

Heading 2

Heading 3

<style> 
.box > :is(h1,h2,h3){
    border:1px solid;
}    
</style>
4
:where()

:where() function selector

Heading 1

Heading 2

Heading 3

<style> 
:where(h1,h2,h3) > i{
    color:#00f;
}    
</style>
4
:has() :has() check descendant selector

Para with span

Para without span

Para with span

Para without span

Para with span 

<style> 
    p:has(span){ color:#00f}
</style>  

<p>Para with <span>span</span> </p>  
<p>Para without span </p>  
<p>Para with <span>span</span> </p>  
<p>Para without span </p>  
<p>Para with <span>span</span> </p>
4

Browsers Compatibility

:hover is not supported in IE6 and below. IE7 and below doesn't supports :focus. However all Level 1 and Level 2 selectors are supported in IE8 except(:checked, :enabled, :disabled, & :target). Good News is that IE9 and above supports all CSS Level 1, 2, 3 and 4 selectors.

Structural Pseudo-classes

Structural Pseudo Selectors can target any element based on their position in nodes. First time they were introduced in css1, and then again in css2 and css3.

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

:not()

targets all element except the one in not function.

  • List 1
  • List 2
  • List 3
  • List 4

<style>
ul li{ color:#31708f}
ul li:not(:nth-child(1)){
    color:#a94442;
}
</style>
   
<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</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 friend, how do you do?

Hola amigo, ¿cómo se hace?


<style>
 :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

:dir(ltr)

 An element having dir attribute with given specific value given inside. For Exp

Hello friend, how do you do?

ہیلو دوست، آپ کیسے ہیں؟


<style>
 :dir(ltr){ color:blue;}
 :dir(rtl){ color:red;}
</style>

<p>This is a para with content</p>                            
<p lang="ur" dir="rtl">>ہیلو دوست، آپ کیسے ہیں؟</p>
4

: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.

Pseudo Elements

Pseudo Elements are used using double colons, i.e. :: selector. Like :before or ::before, both are same in CSS3. For example p:first-line or p::first-line.

Selector Use CSS Level

::placeholder

 To change color of placeholder 

::placeholder{ color:lightblue}
3

::selection

 To style selected text.

Select this text to check default selection

Select this text to check ::selection 


::selection{ 
    background:#333; 
    color:#fff;
}    
::-moz-selection{ 
    background:#333; 
    color:#fff;
}
3