DEV Community

Ravi kumar
Ravi kumar

Posted on

CSS selector

What are selectors

A selectors in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.

Types of Selectors
There are various types of selectors in CSS. Some are:

  1. Universal Selector
  2. Type Selector
  3. Class Selector
  4. Id Selector
  5. Child Selector
  6. Descendant Selector
  7. Adjacent Sibling Selector

Let's read about in details:

Universal Selector

The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like <div>, <body>, <p> or any of the others tag.

A common use is in the universal reset, like this:

* {
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

Example:

Type Selector

A type selector selects all HTML elements that have a given node name. For example, “a” would select all <a> elements and apply the CSS property values to them. “Input” would select all <input> elements, “span” all <span> elements and so on.

You can also use a defined namespace to restrict the type selector to elements only within that namespace.

Syntax:

elementname{ 
/* CSS property */
}
Enter fullscreen mode Exit fullscreen mode

Example:

Class Selector

The .class selector is used to select all elements which belong to a particular class attribute. In order to select the elements with a particular class, use the period (.) character specifying the class name ie., it will match the HTML element based on the contents of their class attribute. The class name is mostly used to set the CSS property to a given class.

Syntax:

.class {
    /*CSS property*/
}
Enter fullscreen mode Exit fullscreen mode

Example:

Id Selector

CSS id selectors select any element in an HTML page, if it has an attribute called id, whose value matches the name of the id selector.
In a stylesheet document, the name of the id selector is preceded by a "#". If an id selector is combined with another or more selectors, id selectors must be preceded with a #. IDs should be unique in an HTML page i.e., same Id can't be given to multiple elements on a single HTML page.

Syntax:

#id {
   /* CSS property */
}
Enter fullscreen mode Exit fullscreen mode

Example

Child Selector

CSS child selectors select an element which is a child of another element.

If, x, y and z are three HTML elements and z resides within start and end tag of y, and y resides within start and end tag of x; then y is called as a child of x; and z is called as a child of y.

 <x>
   <y>
     <z></z>
   </y>
 </x>
Enter fullscreen mode Exit fullscreen mode

While writing child selectors, selectors must be separated with ">" combinator.

syntax:

parent > child{
    /* CSS property*/
}
Enter fullscreen mode Exit fullscreen mode

Example:

Descendant Selector

The Descendant combinator is represented using a single space. It combines two selectors in which the first selector represents an ancestor (parent, parent's parent, etc.), and the second selector represents descendants. The elements matched by the second selector are selected if they have an ancestor element that matches the first selector. Descendant selectors use the descendant combinators.

Syntax

selector1 selector2 {  
  /*  CSS property */  
}  
Enter fullscreen mode Exit fullscreen mode

Example:

Adjacent Sibling Selector

Match an element that is immediately after another element, but not a child of it.

For example, if we wanted all paragraphs that immediately followed an h4 to have green text, but not other paragraphs, we would use the following CSS rule:

Syntax

selector1 +  selector2 { 
  /* property declarations */  
}

Enter fullscreen mode Exit fullscreen mode

Example:

Top comments (0)