A Guide to CSS selectors

Before diving deep into the CSS selectors let's talk about CSS, what is CSS in the first place?

CSS is known as Cascading Stylesheet it is a cosmetic product for our HTML which makes our web pages look beautiful.

Example:-> In a real life, Consider your home in bricks and woods as an HTML that is basically a blueprint or a structure of your house. All the paint stuff, decor, Fancy Flowers, etc can be seen as CSS that makes your house look beautiful.

What are CSS Selectors?

CSS selectors are used to selecting a particular element from our HTML and add some styles to it.

We have the following list of CSS selectors

1. Universal Selector
2. Tag Selector
3. Class and ID Selectors
4. Combined Selectors
5. Direct Child Selectors
6. Sibling Selectors
7. Pseudo Elements

Now, let's see how and why we use these selectors.

1. Universal Selectors:-> * is known as a universal selector, it is used to select everything. It is normally used to set the global font size for our page, remove browser defaults, etc.

Syntax:-> * {}

Example:

1. Tag/Element Selector:-> This is a way to select any element from the HTML page using its tag name. This way of selecting the elements will style all the elements in a webpage that shares the same tag name.

Syntax: -> tag name {}

Example:

In the above example, we have used the p tag for the tag selector and it has applied the styles to the elements that are wrapped inside the p tag.

1. Class and ID selectors:-> Class and ID selectors are a widely used way of targeting elements to style. In order to use them we need to apply a class or id attribute with a value to the HTML elements. The main difference between them from a use case perspective is that classes are reusable whereas we use IDs to uniquely identify the element on our page.

Syntax: -> < p class="bg-dark" >Content< /p > < h1 id="main-heading" >Content< /h1 >

Example

1. Combined Selectors:-> It happens quite often that we give the same classes to different elements in order to style them but let's say one of those needs some extra styles. In such cases, we can use combine selectors.

Syntax: -> .firstselector.secondselector#thirdSelector {}

Example:

1. Direct Child Selectors:-> Let's say we have HTML elements that are wrapped inside each other in a nested structure, but we only want to style those elements that are a direct child of the parent element. In that case, we use the Direct Child Selectors.

Syntax: -> parentSelector > ChildSelector

1. Sibling Selectors: -> ~ and + are called sibling selectors. They are used whenever you want to style the sibling. The + selector only allows you to style the next sibling of the selected element, if you need to select all the remaining siblings of the elements then you should go for the ~ selector.

   Syntax: -> sibling + sibling{} || sibling ~ sibling {}

Example:

1. Pseudo Elements: -> Pseudo Elements are very powerful elements. They can be used to inject elements on the webpage directly from the CSS itself. Sometimes you might have seen on websites that a few bubbly elements are flowing around behind the images or even the watermarks all those things can be achieved using pseudo-elements

Pseudo Elements are of two types a. ::before: -> It is used whenever you want to add something before the selected element.

b. ::after: -> It is used whenever you want to add something after the selected element.

The main thing that you need to keep in mind is that they need content and display properties always to be present in styles.

Syntax: -> element::before {}, element::after{}

Example:

In the above example, you can see that, We have added those 2 letters without using any HTML elements.

That's it for this article. I hope you enjoyed reading it.

Adios Until the next time 🙇🏻

Learn and Grow Together, Keep learning.