CSS Selectors

General Selectors

General selectors are used to select elements based on tag name, class, id, and attributes.

Universal Selectors

Universal selectors selects all the elements in the HTML page. It is defined by the * symbol.

Syntax: *

Let's see with some example

					 
        
          *{
            color: red;
          }
        
      

Element Selectors

Element selectors (Tag selectors, Type selectors) selects all the elements based on element name.

Syntax: elementname

Let's see with some example

					 
        
          body{
            background-color: #ff0000;
          }
          h1{
            color: #ff0000;
          }
          p{
            font-size: 14px;
          }
        
      

Class Selectors

Class selectors selects al the elements based on name of the class attribute given to element. It is defined by the dot(.) followed by class name.

Syntax: .classname

Let's see with some example

					 
        
          .text-red{
            color: #ff0000;
          }
        
      

ID Selectors

ID selectors selects element based on name of the id attribute given to element. It is defined by the # followed by id name.

Syntax: #idname

Let's see with some example

					 
        
          #navigation{
            background-color: #ff4d2e;
          }
        
      

Attribute Selectors

Attribute selectors selects all the elements based on name of the attribute given to element. It is defined by the attribute name enclosed by [].

Syntax: [attribute], [attribute=value], [attribute~=value], [attribute|=value], [attribute^=value], [attribute$=value], [attribute*=value]

Let's see with some example

					 
        
          [href]{
            color: #ff0000;
          }
        
      

Combinator Selectors

Combinator selectors selects element based on the relationship between elements.

Descendant Combinator

Descendant combinator selectors selects all the elements that are descendant of first selector. It is defined by the space (" ").

Syntax: selector1 selector2

Here selector1 and selector2 can be any selectors such as element, class, id, attribute, etc.

Let's see with some example

					 
        
          header h1{
            color: red;
          }
        
      

Child Combinator

Child combinator selectors selects all the elements that are direct children of the first selector. It is defined by the > symbol.

Syntax: selector1 > selector2

Let's see with some example

					 
        
          ul > li{
            color: red;
          }
        
      

General Sibling Combinator

General sibling combinator selectors selects all the elements that sibling of the first selector. Second element comes after the first element (Not necessarily immediately) and both shares the same parent. It is defined by the ~ symbol.

Syntax: selector1 ~ selector2

Let's see with some example

					 
        
          h1 ~ p{
            color: red;
          }
        
      

Adjacent Sibling Combinator

Adjacent sibling combinator selectors selects all the elements that direct sibling of the first selector. Second element comes just after the first element and both shares the same parent. It is defined by the + symbol.

Syntax: selector1 + selector2

Let's see with some example

					 
        
          h1 + p{
            color: red;
          }
        
      

Column Combinator

Column combinator selectors selects all the elements which belongs to a column. It is defined by the || symbol.

Syntax: selector1 || selector2

Let's see with some example

					 
        
          col || td{
            color: red;
          }
        
      

Pseudo Selectors

Pseudo selectors are used to select elements based on the state of the elements.

Pseudo Class Selectors

Pseudo class selectors selects elements based on the state information of the element which is not contained in the document tree. It is defined by the : symbol.

Syntax: selector:state

Let's see with some example

					 
        
          a:visited{
            color: green;
          }
          button:hover{
            color: pink;
          }
        
      

Pseudo Element Selectors

Pseudo element selectors selects elements based on the entity information of the element which is not contained in the document tree. It is defined by the :: symbol.

Syntax: selector::entity

Let's see with some example

					 
        
          p::first-letter{
            font-size: 36px;
          }
          p::first-line{
            color: green;
          }
        
      

Group Selectors

Group selectors are used to select a group of elements. It is useful when two or more elements share the same style. It is defined by the , symbol.

Syntax: selectors1, selectors2

Here selectors1 and selectors2 can be any selectors such as class, id, element, pseudo, combinators, etc.

Let's see with some example

					 
        
          h1, p{
            color: green;
          }
          .text-red, .text-green{
            font-size: 14px;
          }
          #navigation h1, .section h1, div > h1{
            font-size: 24px;
          }