What are CSS Selectors?

CSS Selectors are patterns used to select the HTML elements you want to style. Rather than writing inline CSS for each element and re-writing the same style for other HTML elements, you can use CSS selectors to minimise the duplication of CSS code.

Let's try to understand the different types of selectors below:

Universal selector

The universal selector allows one to style all the elements on the HTML page. An asterisk (*) is used for selecting all elements. With the code below, the background and text colour of the entire HTML page changes to specified colours.

*{
background-color:#414848;
color:#7b929c;
}

Individual selector

Individual selectors allow the styling of the HTML elements you want. Each element can have a different style. The code below all the headings with <h3> and <p> tags will have the colour changed.

h3{
 color:#9881ab;
}
p{
 color:#CAD5E2;
}

Class and ID Selector

Class Selector allows you to create a CSS class with the styles you want, these classes can be used for any HTML element.

.highlight{
   background-color: yellow;
   color:black;
}

ID Selector allows you to create a set of CSS styling, these IDs should be uniquely used in HTML i.e, no two HTML elements should use the same ID, as ID should be unique for all HTML elements.

#ident{
  background: white;<br>
  color:red;<br>
}

AND Selector

AND Selector allows you to write conditional styling, that is if you want to style an HTML element which has all the properties you specify then only the style is applied.

p span.highlight{
    background-color: red;
    color:white;
}

Combined Selector

Combined Selectors allow the same styling for any specified HTML elements, that is more than one HTML element type can have the same styling.

h1, code{
  color:#d9ce98;
}

Inside an element Selector

Inside an element selector, allows you to identify the nested elements and style them. The below code styles the code element which is the inside <div> element, a <div> element is inside the <body> element.

body div code{
    display:block;
    width:500px;
    color:#414848;
    background-color: white;
}

Direct Child Selector

Direct Child Selector allows you to style the direct child elements, that is if the element is directly inside of the other element then it is used.

div>h3{
   color:aqua;<br>
}

Sibling Selector Selectors

Sibling Selector Selectors allow styling the just next element of the element using the sibling class.

 .sibling + li {
    display:inline;<br>
    color:black;<br>
    background-color: pink;<br>
}

Here is an example webpage, using all the selectors!!!

https://codepen.io/krishnavetthi/pen/VwBYJpN

Before After Selectors

Before After Selectors are Pseudo Selectors, these are used to add cosmetic styling before and after the HTML elements.

Few scenarios where you can apply these, before all the lists if you want to add any data before any element you can use ::before selector with the tag you want to have it, for example p::before and you can define the CSS in content property. You can use ::after selector if you want to insert any emoji or link emoji after any element, for example h4::after and define the CSS in content property.

https://codepen.io/krishnavetthi/pen/qByEzov

Krishna vetthi's Blog