CSS - Selectors

Previous
Quiz
Next

CSS Selectors are used to select the HTML elements you want to style on a web page. They allow you to target specific elements or groups of elements to apply styles like colors, fonts, margins, and more.

The element or elements that are selected by the selector are referred to as subject of the selector.

CSS Universal Selector

CSS universal selector is a special selector that selects all the elements in an HTML document. It is denoted by an asterisk mark (*).

Syntax

The syntax for the universal selector is as follows:

* {
   margin: 0;
   padding: 0;
}

As per the above syntax, the universal selector is used to apply a margin and padding of 0 to all HTML elements.

Example

The following example demonstrates the use of a universal selector (*) to set the font size, background, and text color of the document:

<html>
<head>
<style>
   * {
      background-color: peachpuff;
      color: darkgreen;
      font-size: 25px;
   }
</style>
</head>
<body>
   <h1>Universal selector (*)</h1>

   <div>Parent element
   <p>Child paragraph 1</p>
   <p>Child paragraph 2</p>
   </div>

   <p>Paragraph 3</p>
</body>
</html>

CSS Element Selector

CSS element selector selects and styles specific HTML elements. The element selector is defined by simply using the element's name in the stylesheet.

Syntax

The syntax for the element selector is as follows:

p {
   color: green;
}

h1 {
   text-decoration-line: underline;
}

Example

The following example demonstrates the use of a type selector to style the heading, paragraph and div element:

<html>
<head>
<style>
   div {
      border: 5px inset gold;
      width: 300px;
      text-align: center;
   }

   p {
      color: green;
   } 

   h1 {
      text-decoration-line: underline;
   }
</style>
</head>
<body>
   <div>
      <h1>Type selector</h1>
      <p>div with border and text-aligned to center</p>
      <p>paragraph with green color</p>
      <p>h1 with an underline</p>
   </div>
</body>
</html>

CSS Class Selector

CSS class selector selects an element with a specific class attribute. The class selector is defined using a period (.) followed by the class name.

Syntax

The syntax for the class selector is as follows:

.style-h1 {
   text-decoration-line: underline;
}

.style-p {
   color: green;
   font-size: 25px;
}

Example

The following example demonstrates the use of a class selector, where .style-p, .style-h1 and .style-div are class selectors:

<html>
<head>
<style>
   .style-div {
      border: 5px inset gold;
      width: 300px;
      text-align: center;
   }

   .style-p {
      color: green;
      font-size: 25px;
   } 

   .style-h1 {
      text-decoration-line: underline;
   }
</style>
</head>
<body>
   <div class="style-div">
      <h1 class="style-h1">class selector</h1>
      <p class="style-p">class .style-p applied</p>
      <p>No class applied on this p element</p>
   </div>
</body>
</html>

CSS ID Selector

CSS ID selector selects an element with a specific value for its id attribute. It is denoted by the "#" (hash) symbol.

Syntax

The syntax for the ID selector is as follows:

#style-p {
   color: green;
   font-size: 25px;
} 

#style-h1 {
   text-decoration-line: underline;
   color: red;
}

Example

The following example demonstrates the use of an id selector, where #style-p, #style-h1 and #style-div are the id selectors applied on the elements:

<html>
<head>
<style>
   #style-div {
      border: 5px inset purple;
      width: 300px;
      text-align: center;
      background-color: lightgoldenrodyellow;
   }

   #style-p {
      color: green;
      font-size: 25px;
   } 

   #style-h1 {
      text-decoration-line: underline;
      color: red;
   }
</style>
</head>
<body>
   <div id="style-div">
      <h1 id="style-h1">ID selector</h1>
      <p id="style-p">id #style-p applied</p>
      <p>No id applied on this p element</p>
   </div>
</body>
</html>

CSS Attribute Selector

CSS attribute selector selects an element based on a specific attribute or attribute values on an element.

Syntax

The syntax for the attribute selector is as follows:

a[target] {
   background-color: peachpuff;
}

You can also specify the element with an attribute having a specific value.

a[href="https://www.tutorialspoint.com"] {
   background-color: peachpuff;
}

Example

The following example demonstrates the use of an attribute selector. Here we have changed the style of elements with target attribute:

<html>
<head>
<style>
   a[target] {
      background-color: #04af2f;
      color: white;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>Attribute selector</h2>
   <p>Styling applied to anchor element with target attribute:</p>
   <a href="#">Tutorialspoint</a>
   <a href="#" target="_blank">google</a>
   <a href="#" target="_self">wikipedia</a>
</body>
</html>

CSS Group Selector

CSS group selector allow us to apply same style to multiple elements at a time. Name of elements are comma-separated. The group selector keep CSS concise and avoid redundancy.

Syntax

The syntax for the group selector is as follows:

/* Apply same background color for h1 and h2 */
h1, h2 {
   background-color: grey;
}

Example

The following example shows how to use group selectors in CSS. We have set the background color for the headings and other HTML elements with reduced code.

<html>
<head>
   <style>
      /* This applies to both <h1> and <h2> elements */
      h1, h2 {
            background-color: grey;           
            padding: 4px;
      }

      /*Applies to all paragraphs, elements with class*/
      /*'highlight', and element with ID 'hightlightSpan'*/
      p, .highlight, #hightlightSpan {
            background-color: yellow;
            padding: 10px;
      }
   </style>
</head>

<body>
      <h1>CSS Selectors</h1>
      <h2>Group Selectors</h2>
      <p>This is a paragraph.</p>
      <div class="highlight">
         This is div
      </div>
      <br>
      <span id="hightlightSpan">
         This is span
      </span>
</body>
</html>

CSS Pseudo-class Selector

CSS pseudo-class selector styles a specific state of an element, such as :hover is used to style an element when hovered.

Syntax

The syntax for the pseudo-class selector is as follows:

a :hover {
   background-color: peachpuff; 
   color: green;
   font-size: 2em;
}

Example

The following example demonstrates the use of a pseudo-class selector. The font size, text and background color of the link changes on hovering over it.

<html>
<head>
<style>
   a:hover {
      background-color: peachpuff;
      color: green;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>Pseudo-class selector</h2>
   <p>Styling applied to anchor element with a pseudo-class:</p>
   <a href="#">Tutorialspoint</a>
</body>
</html>

CSS Pseudo-element Selector

CSS pseudo-element selector is used to style a specific part of an element rather than the element itself.

Syntax

The syntax for the pseudo-element selector is as follows:

a::before {
   content: url();
}

Example

The following example demonstrates the use of a pseudo-element selector (::before) and (::after):

<html>
<head>
   <style>
      /* Add and style contents before paragraph */
      p::before {
            content: "Note: ";
            font-weight: bold;
            color: red;
      }

      /* Add and style contents after paragraph */
      p::after {
            content: " [Read more]";
            font-style: italic;
            color: blue;
      }
   </style>
</head>

<body>
   <h2>Pseudo-element selector</h2>
      <p>This is a paragraph.</p>
</body>
</html>

CSS Descendant Selector

CSS descendant selector styles all the tags which are child of a particular specified tag. To mention as descendant, a single space between parent and child element is used.

Syntax

The syntax for the descendant selector is as follows:

div p {
   color: blue;
}

The above code set text color of paragraph tags that are inside div element to blue.

Example

The following example show how to use descendant selector in css. We have changed the text color of the paragraph element that is immediate child of the div element:

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 2px solid;
      }
      div p {
         color: blue;
      }
   </style>
</head>

<body>
   <div>
      <p>
         This paragraph is inside a div 
         and will be blue.
      </p>

      <section>
         <p>
            This paragraph is inside a 
            section which is inside a 
            div and will also be blue.
         </p>
      </section>
   </div>
   <p>
      This paragraph is outside the div 
      and will not be blue.
   </p>
</body>
</html>

CSS Child Selector

CSS child selector selects all the direct child of a particular element. This is denoted by '>' (Greater than) symbol.

Syntax

The syntax for the child selector is as follows:

div > p {
   color: blue;
}

The above code set text color of paragraph tags that are directly inside div element to blue.

Example

The following example shows how to use child selector in css:

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 2px solid;
      }
      div > p {
         color: blue;
      }
   </style>
</head>
<body>
      <div>
         <p>
            This paragraph is inside a div and 
            will be blue.
         </p>

         <section>
            <p>
               This paragraph is inside a  
               section which is inside a div
               and will not be blue as this 
               is not direct child
            </p>
         </section>
      </div>
      <p>
         This paragraph is outside the div
         and will not be blue.
      </p>
</body>
</html>

CSS Adjacent Sibling Selectors

CSS adjacent sibling selector selects an element that is immediately preceded by a specified element. A plus symbol ( "+" ) is used to denote adjacent sibling.

Syntax

The syntax of adjacent sibling selector is as follows:

h1 + p {
   margin-top: 0;
}

The above code sets top margin of paragraph tag just after h1 tag to 0.

Example

The following example shows how to use adjacent sibling selector in css.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 4px solid;
      }
      div + p {
         color: blue;
      }
   </style>
</head>
<body>
      <p>
         This paragraph is above the div 
         and will not be blue
      </p>
      <div>
         <p>
            This paragraph is inside a div 
            and will not be blue.
         </p>
      </div>
      <p>
         This paragraph 1 after the div 
         and will be blue.
      </p>
      <p>This paragraph 2 after the 
         div and will not be blue.
      </p>
</body>
</html>

CSS General Sibling Selector

general sibling selector targets all the element that is preceded by a specified element. The general sibling selector is denoted by tilde symbol ( "~" ).

Syntax

The syntax of general sibling selector is as follows:

h1 ~ p {
   color: gray;
}

The above code sets text color of all the paragraph after h1 tag to gray.

Example

The following example shows how to use general sibling selector in css:

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 4px solid;
      }
      div ~ p {
         color: blue;
      }
   </style>
</head>

<body>
      <p>
         This paragraph is above the div 
         and will not be blue
      </p>
      <div>
         <p>
            This paragraph is inside a div 
            and will not be blue.
         </p>
      </div>
      <p>
         This paragraph 1 after the div 
         and will be blue.
      </p>
      <p>This paragraph 2 after the 
         div and will be blue.
      </p>
</body>
</html>

CSS Nested Selectors

CSS nesting allows to nest one style rule inside another rule, with the selector of the child rule relative to the selector of the parent rule.

Characteristics

The nesting selector shows the relationship between the parent and child rules.

  • When the nested selectors are parsed by the browser, it automatically adds a whitespace between the selectors, thus creating a new CSS selector rule.
  • In situations where the nested rule needs to be attached to the parent rule (without any whitespace), like while using the pseudo-class or compound selectors, the & nesting selector must be prepended immediately to achieve the desired result.
  • In order to reverse the context of rules, the & nesting selector can be appended.
  • There can be multiple instances of & nesting selector.

Syntax

The syntax for the nesting selector is as follows:

nav {
   & ul {
      list-style: none;
      & li {
      display: inline-block;
      & a {
         text-decoration: none;
         color: blue;
         &:hover {
            color: red;
         }
      }
      }
   }
}

Example

The following example demonstrates the use of a nesting selector (&):

<html>
<head>
   <style>
      #sample {
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         font-size: 1.5rem;
         & a {
            color: crimson;
            &:hover,
            &:focus {
               color: green;
               background-color: yellow;
            }
         }
      }
   </style>
</head>
<body>
   <h1>& nesting selector</h1>
   <p id="sample">
      Hover <a href="#">over the link</a>.
   </p>
</body>
</html>
Print Page
Previous
Next
Advertisements