CSS Selectors

Ali-MEmam — Sun, 21 Feb 2021 00:39:54 +0000

A lot of us use Classes / Id / Elements without knows there are other Selectors so, let's take an overview of CSS selector and how it helps us.

What are CSS selectors?

CSS selectors let you apply CSS styles to a specific HTML element. They let you differentiate between HTML elements of the same type, like when we had two div elements but only wanted to style one of them.

What Types of CSS Selector?

There is a lot of selectors provided from CSS to give you an enormous level of flexibility So let's dive into it.

Basic selectors

Universal selector
universal selector gives you control of all elements like if you want to apply red color to all your elements, Many developers will use this trick to zero out the margins and padding.

ID selector
id selector is Prefixing the hash symbol and it gives us the ability to select a specific element with id.

There should be only one element with a given ID in a document

Class selector
The class selector is prefixing with a dot and it gives us the ability to select all elements with this class name and this is the most common selector because it gives us the flexibility to create reusable classes to use over the project

Element selector
What if you want to target all elements on a page, according to their type it's simple you can just type the element type.

Attribute selector
in my opinion, this selector really helpful because it gives you the flexibility to select specific elements from their attribute
like if we have 2 inputs one of them is text and the second is password input we can select the text only by this selector.

We can select a specific element depended on the start letter or end letter or contain a string and here list of these selectors.

Combinator selectors

A combinator is something that explains the relationship between the selectors.

Descendant combinator

this selector is one of the most common selectors too and it's helpful when we want to select all (children) in our case is p inside a specific container in our case is div (parent).

a b{
 // code
}

If your selector looks like a b c d, you're doing it wrong. Always ask yourself if it's absolutely necessary to apply all of that weight

Adjacent sibling combinator
this selector will select only the first element that is immediately preceded by the former element in our case here the p is the selected element

General sibling combinator
This General sibling combinator is similar to Adjacent sibling combinator, but it's less strict. because it'll select all p after h1 even it's not the first element.

Child combinator
this Selector only looks for the first level inside the container and applies the style on it so if we have a span inside span inside the div the style will apply on the first span only because it's the first level.

Pseudo Selectors

pseudo allows the selection of elements based on state information like if it's hovered or visited or checked etc... and we use : symbol to refer to it and here a list of the Pseudo Selectors.

Conclusion

I hope that I explained the summary of CSS selectors and If You have any queries or any mistakes that you think I have made would be more than happy If you could give suggestions to further improve it And if you have any question pm me.

Resources

https://www.w3schools.com/cssref/css_selectors.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
https://www.w3schools.com/css/css_selectors.asp

DEV Community: Ali-MEmam