CSS selectors

It's a way how to select HTML content and style it. CSS selectors select HTML elements according to their class, id, attributes, type, etc.

1. Universal selector: Selects everything by default.

*{ background-color: #000000;}

It is used to apply CSS style to the entire HTML document. It uses the asterisk (*) at the starting. In the above example, the entire document will have a background color of black.

2. Element selector:

p {
padding : 20px
}

img {
width: 300px;}

It is used to apply CSS style on the HTML element based on its name for example div, p, h1, etc

3. Class selector:

.black{
color : #000000;
border: 4px solid #000000;

The CSS class selector selects the HTML elements with the specific class attribute. The most versatile selector since identical style can be applied to the different HTML elements with the same class. In the above example, it will select all the HTML elements having the class attribute "black" and apply the required CSS.

4. ID selector

#white{
text-align:center;
color : #ffffff;
border: 4px solid #ffffff;

ID selector selects the HTML elements with the specific id attribute just like the class selector. In terms of CSS specificity, the ID selector is the most powerful selector. NOTE: The value of an element's ID must be unique.

5. Group selector: Also known as a combined selector.

div,p,h1 {
font-family : monospace
}

(,) allows us to select multiple elements with different selectors and style them once. It takes multiple HTML elements separated by a comma & applies CSS to them. We use this selector whenever have to apply a common style to different HTML elements.

NOTE: If any selector is invalid the entire rule will be ignored.

6. Combinator selectors

Descendant combinator:

ul a{
text-decoration : none;
font-family: monospace;
}

It will select all the a's tags that is nested anywhere within the ul tag

Adjacent Sibling Combinator:

div + p {
color : #000000;

Selects only p's tags that are immediately preceded by the div.

Direct Child Combinator :

div > h1 {
background-color : #ffffff;
}

It selects all h1 tags that is direct child of div tag

-Attribute selector: It selects all the elements which have the given attribute. This particular attribute is most tricky & a bit longer as well for beginners.

i. X[href="lco"]

a[href = "https://web.learncodeonline.in/"]{
color : blue;

The above snippet will style all anchor tags which link to LCO it will recieve the blue color.

ii. X[href*="lco"]

a[href*="lco"] {
color : blue;
}

Selects every 'a' element whose href attribute value contains the substring "lco"

iii.X[href^="HTTPS"]

Selects every 'a' element whose href attribute value begins with "HTTPS"

iv.X[href$=".pdf"]

Selects every 'a' element whose href attribute value ends with ".pdf"

Conclusion

Here comes the end part, just summarise what all we have covered in this article.

-Universal selector

-Element selector

-Class and ID selector

-Group selector

-Combinators

-Adjacent, Descendant & Direct child combinators

-Attribute selector and their variants

That's all for now!! So what are you waiting for please go and hit your favorite code editor with tons of CSS selector codes that will impress your friends.