CSS Selectors

CSS selectors are used to finding HTML element.CSS selector targets the HTML element so that the CSS rule can be applied very easily.

Kinds Of CSS Selector: Universal Selector, Simple Selectors, Combinator selectors, Pseudo-class selectors, Pseudo-elements selectors, Attribute selectors,

Universal Selector

Universal selector(*) selects all the HTML elements and applies CSS rule to all the HTML elements inside the document.

Example

       
    *{
      text-align: center;
      color: blue;
    }

Note:CSS selector is used to finding the HTML elements inside the document. Once, the HTML element finds out then the CSS rule has been applied to that element.

General Syntax

      *{
 css-property:value;
}

Try it now

Source Code

          *{
  text-align: center;
  color: violet;
  font-size: 18px;
  word-spacing: 5px;
}

Try it now

Code Explanation

Note:In this example, the universal selector rule is applied to the HTML element. This rule is applied to every HTML element.

Element Type Selector

Rule1: The element type selector selects the element by its name and then applies the CSS style rule to the HTML element.
Rule2: An HTML document consists of more than one similar element then the element type selector rule will be applicable to all of the similar HTML elements.

General Syntax

      p {
  color: blue;
}

Try it now

Source Code

          p{
  color: #232323;
  font-size: 20px;
  font-weight: 300;
  word-spacing: 3px;
}

Try it now

Code Explanation

Note:In this example, the element type selector rule has been applied to the HTML element. This rule is applied to all similar HTML elements.

CSS Id Selector

Id selector rule applies on a unique HTML document element.It is defined by a hash sign(#) followed by HTML element id value.Please keep in mind that every HTML element have some property that is name ,id,class etc.Each element id value should be different while as class name may be same.

General Syntax

      #text_description {
  color: #393e46;
  font-size: 20px;
}

Try it now

Source Code

          #text_description {
  color: #393e46;
  font-size: 20px;
}

Try it now

Code Explanation

Note:In this example, the CSS id selector rule has been applied to the HTML element. Please keep in mind that every element inside the HTML document has a different id value hence CSS id selector is applied on the unique HTML element.

Class Selector

Class selector selects HTML elements class property value.The CSS class selector is defined with a period sign(.) immediately followed by the class value of the targeted HTML element. Please keep in mind that this rule will be applied to more than one element at a time having the same class value as the HTML elements.

General Syntax

      .features {
  color: #232323;
  font-size: 20px;
  font-weight: 300;
  word-spacing: 3px;
  color: orange;
}

Try it now

Source Code

          .features {
  color: #232323;
  font-size: 20px;
  font-weight: 300;
  word-spacing: 3px;
  color: orange;
}

Try it now

Code Explanation

Note:Please keep in mind that a similar class can be assigned to more than one HTML element. Hence, the CSS class selector is applied to more than one HTML element.

Descendant Selectors

Descendant Selectors selects those elements that are the descendant of another element.

General Syntax

      ul.menu li a {
  text-decoration: none;
}
h1 em {
  color: green;
}

Try it now

Source Code

          ul.fruits li a {
  text-decoration: none;
  color: #ba135d;
  font-size: 20px;
}

Try it now

Code Explanation

Note:In the above example CSS descendant selectors have been used that select those elements that are the descendant of another element.

Child Selectors

A child selector is used to select the direct child element of some elements. This rule only applies to the direct child of any element and does not affect another element. Please keep in mind that the child selector is separated by greater than symbol(>).

General Syntax

      ul > li {
  list-style: square;
}
ul > li ol {
  list-style: none;
}

Try it now

Source Code

          ul > li {
  list-style: circle;
}
ul > li a {
  font-size: 20px;
  color: #bf1363;
  font-weight: 400;
  font-style: italic;
  text-decoration: none;
}

Try it now

Code Explanation

Note: In the above example CSS child selector has been used that is separated by greater than symbol(>) and it is used to select those elements that are the descendant of another element and it is only applied to the direct children of the selected element.

The CSS Grouping Selector

Basically grouping selector selects all the HTML elements with the same style definitions.

Source Code

          h2,h3,p{
  text-align: center;
  color: #0c4271;
  font-size: 18px;
  font-weight: 500;
}

Try it now

Code Explanation

Note: In the above example CSS a grouping selector is applied that selects all the HTML elements with the same style definitions.

Online Test / Quiz

Question set 1

CSS Selectors

Universal Selector

Example

Element Type Selector

CSS Id Selector

Class Selector

Descendant Selectors

Child Selectors

The CSS Grouping Selector

Online Test / Quiz

Web Tutorials