CSS Selectors

Hello everyone, in this article I will discuss selectors in CSS, we will see the use cases, and some examples of selectors in CSS.

What are CSS Selectors

CSS Selectors are used to target specific HTML elements and style them using CSS. We can design any portion of HTML by selecting them in CSS using the selectors.

There are many types of selectors in CSS:

• Universal selectors

• individual selector

• class and id selector

• and selector

• combined selector

• inside an element

• direct child

• sibling ~ or +

• :hover Selector

• ::before Selector

Let's know in detail about each selector:

Universal Selectors

Universal selectors are used to styling everything on the page. We can use the (*) selector

* {
color: white;

}

This will make all text white on the HTML page

Individual selectors

We can style individual elements on the page using individual selectors. To style any individual elements we can select them individually. For example, we can style all paragraphs on a page by just selecting the p element.

p {
color: white;
}

this selector will make all paragraphs color white.

class and id selector

We can select any html element with specific Class and ID selectors.

If we have more than one same element in the HTML page we can select a specific one by giving them a class or id, and we can style them with a class or id selector.

.conatiner {
    background-color: #000000;
}

this will make the background color black for all elements that have the class container

#header {
    color: #fff;
}

this will make the text color white to elements that have the id header

and selector (chained)

We can select any specific HTML element that has more than one class and we can select them with chained selects by selecting there 2 or more classes.

p.text-primary.text-bold {
    color: red;
}

this will make the text color red for all paragraphs who has the class text-primary and text-bold.

combined selector

Style two elements in one row using combined selectors. We can style two elements at one time by separating them with (,) and applying the CSS.

li, p {
    font-family: sans-serif;
}

this will make the font of li & paragraph to sans-serif.

inside an element

It's used to target the decedent elements in HTML.

main div p {
  color: burlywood;
}

this will transform the text color to burlywood of p is the child of div, & div is a child of main.

direct child

We can select all the children of a specific element in HTML. We can style the paragraph who is the child of div, & div is child of the main element by using:

main > div > p {
  text-transform: uppercase;
}

sibling ~ or +

We can style the specific sibling using this selector.

.subling + p {
    color: white;
}

this will make the text color white for p which is the first sibling of the .sibling class element.

:hover Selector

This pseudo selector is to style an HTML element when the mouse moves over the element.

.btn:hover {
    background: pink;
}

this will target the button that has a class of .btn, & turn the background color to pink when the mouse moves over the button.

::before Selector

This pseudo selector inserts something before the content of each selected element.

p::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: orange;
}

This will add the 20px circle icon with the background color of orange just before the p element.

I hope you found this article helpful to know about CSS selectors. Thanks for reading.