Overview

This article will help you to understand the basics of CSS SELECTOR. If you are new to the web design/development journey, you may think about how to apply specific rules to a single or a bunch of HTML elements, to make them unique. And here is all you need to know about CSS Selector. In CSS, selectors are used to target the HTML content or elements on our web pages that we want to style. A wide variety of CSS selectors are available, allowing for selecting elements to style. Below I'm listing down a few of the CSS selectors, which will be covered in this article:

• Basic selectors

  • Universal Selector

  • Type Selector

  • Class Selector

  • ID Selector

• Grouping selectors

• Combinators

  • Descendant combinator

  • Child combinator

  • General sibling combinator

  • Adjacent sibling combinator

  • Column combinator (Experimental)

• Pseudo Selectors

  • Pseudo classes

  • Pseudo elements

Basic Selectors

Universal Selector

The universal selector is used for selecting all elements on the web page. * used for defining universal selection in CSS.

* {  
   color: blue;  
   margin: 10px; 
}

Type Selector

The type selector is used for Selecting all elements that have the given node name. For example, if you want your webpage all your paragraphs should be aligned center and should have a 20px font size, the same can be achieved using the CSS Type selector.

Syntax: elem { css style properties}

p {
  text-align: center;
  font-size: 20px;
}

Class Selector

The Class selector target HTML classes to apply style to elements. . followed by class name, is used for defining class selection in CSS.

Syntax: .class_name { css style properties}

.red {
  background-color: red;
  color: white;
  font-size: 20px;
  margin-left: 20px;
}
.green {
  background-color: green;
  color: white;
  font-size: 20px;
  margin-right: 20px;
}
.blue {
  background-color: blue;
  color: white;
  font-size: 20px;
  margin-right: 20px;
}

ID Selector

IDs are something we used to define some unique elements. Same as class selectors, ID selector target HTML IDs to apply style on elements. # followed by id name, is used for defining id selection in CSS.

Syntax: #id_name { css style properties}

#red {
  background-color: red;
  color: white;
  font-size: 20px;
  margin-left: 20px;
}
#green {
  background-color: green;
  color: white;
  font-size: 20px;
  margin-right: 20px;
}
#blue {
  background-color: blue;
  color: white;
  font-size: 20px;
  margin-right: 20px;
}
#yellow {
  background-color: yellow;
  color: red;
  font-size: 20px;
  margin-left: 20px;
}

Grouping selectors

The Grouping selector is used to select multiple elements and style them together. Elements need to be selected to apply a style and should be separated by a comma ** , **.

Syntax: elem_1, elem_2, elem_3 { css style properties}

h2, p, span{
  color: brown;
  font-size: 30px;
  text-align: center;
}

%[codepen.io/hackerManju/pen/rNdqdLN]

Combinators

Combinators are used to select elements where there is child-parent relation.

Descendant combinator

The descendant selector matches all elements that are descendants of a specified element. Typically **Descendant combinator ** is represented by a single space " " character, which combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

Syntax: selector1 selector2 { css style properties}

div p {
  background-color: pink;
  font-size:20px;
}

Child combinator

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.

Syntax: selector1 \> selector2 { css style properties}

div > p {
  background-color: pink;
}

General sibling combinator

The General sibling combinator (~) is placed between two CSS selectors. It matches all elements that are the next siblings of a specific element. The General sibling combinator can be used to select a group of elements that share the same parent element.

Syntax: selector1 ~ selector2 { css style properties}

div ~ p {
  color: pink;
}

Note: as per the above example every <p> element that is preceded by a <div> element will be getting selected.

Adjacent sibling combinator

The Adjacent sibling combinator (+) is placed between two CSS selectors. "Adjacent" means "immediately following". As the name suggested, It matches the element only if it immediately follows the first element. The Adjacent sibling combinator selects the element (immediate sibling) that comes immediately after another element (Parent).

Syntax: selector1 + selector2 { css style properties}

div + p {
  color: pink;
}

Note: as per the above example the first <p> element that is placed immediately after <div> elements will be only getting selected.

Column combinator

The Column combinator (||) is placed between two CSS selectors. This is an experimental technology. As the name suggested, It matches only those elements matched by the second selector that belong to the column elements matched by the first.

Syntax: selector1 || selector2 { css style properties}

col.selected||td {
  background: grey;
}

Note: as per the above example the <td> elements that are placed after <col> having the selected class*, will be getting selected.*

Pseudo Selectors

Pseudo classes

The Pseudo classes are CSS selectors with a preceding colon (:) e.g (:hover). Pseudo classes allow you to apply the style according to the changing state and external factors. Pseudo classes are added to the selector for adding an effect to the existing elements based on their states.

Syntax: selector1 **:**selector2 { css style properties}

h2:hover {
  color: grey;
}

Note: as per the above example the mentioned css color property will be updated on the hover state of the <h2> element. Here keyword after the (:) define the state of the first selector, during which the mentioned CSS properties will be getting applied.

There are various Pseudo classes available, but here will discuss a few most commonly used Pseudo classes only.

For more details of Pseudo classes please visit this below page

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.

Pseudo elements

The Pseudo elements are CSS selectors with a preceding double colon (::) e.g (::first-letter). Pseudo elements allow you to apply the style to a specific part of an element.

Syntax: selector1 **::**selector2 { css style properties}

p::first-letter {
  color: red;
}

Note: as per the above example the mentioned css color property will be applied to the first letter of the <p> element.

There are various Pseudo elements available, but here will discuss a few most commonly used Pseudo elements only.

For more details on Pseudo elements please visit this below page

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Conclusion

Thanks a lot for reading and hope now you know the basic concept of CSS selectors usage. For more information please check out the official CSS selector site. And don't forget to hit a 👍 if you find this article helpful. Happy learning! 🎉