CSS

CSS gives the style to row HTML.
HTML is used to structure a website, and CSS takes the responsibility of design.

CSS Selectors

CSS selectors are used to find the element whose property will be set.

Types of CSS Selectors

Universal Selector

It will select all the elements in the HTML document.

*{
    background-color: #000000;
}

"Output- It will change the background colour of the whole HTML document in colour #000000 (black)."

Individual Selector

Using individual selectors you can individually target any element on the HTML document.

p{
    background-color: #f36666;
}

"Output- It will change the background colour of all "p" tags in the HTML document."

Class and Id Selector

Class and Id Selector are used to select the HTML element based on their class name attribute or id name attribute.
It is the most commonly used Selectors.

Class selector

The dot (".") symbol with the class attribute name is used to select the HTML element.

.red{
    background-color: red;
}

"Output- It will change the background colour of all the tags whose class is 'red' in the HTML document."

Id selector

The hash ("#") symbol with the id attribute name is used to select the HTML element.

#green{
    background-color: green;
}

"Output- It will change the background colour of tags whose id is 'green' in HTML document."

Note:- Id is unique and only given to one element only one time in the whole document, while class is given to multiple elements in the whole document.

And Selector (chained)

It helps to select a particular element having one or more than one class and ids.

.bg-yellow.cl-red{
    background-color: yellow;
    color: red;
}

"Output- It will apply the given property specifically to only those tags whose classes are 'bg-yellow' and 'cl-red' in HTML document."

p.bg-yellow.cl-red#brdr{
    background-color: yellow;
    color: red;
    border: 3px solid #f70000;
}

"Output- It will apply the given property specifically to only those "p" tags whose classes are 'bg-yellow' and 'cl-red' and id is 'brdr' in HTML document."

Combined Selector

Combined Selector is used to select multiple elements of the HTML document which required to have a common style.

div, p.group, a {
    background-color: #1a0beb;
}

"Output- It will apply the same given property to all the "div" tags and all the "p" tags whose class is 'group' and all the "a" tags in the HTML document."

Inside an element Selector

The inside element Selector is a very precise selector, it is used to target something very specific.
This selector is select the specified child tag or tags of a given specified element.

div.inside p span{
    background-color: #04f7eb;
}

"Output- It will apply the given property to the "span" tag which is inside a "p" tag element which is inside a "div" element with a class of 'inside'."

Direct child Selector

Direct child Selector selects the particular elements that are the direct child of a specified element.
The greater than (">") symbol is used to select that particular direct child element of a specified HTML element.

div>li{
    background-color: #f60ec4;
}

"Output- It will apply the given property to the "li" tag or tags which is inside and direct child of a "div" tag element."

Note:- It will not select the element which is not a direct child of the specified element. In the given example it only select the "li" tags which are the direct child of "div" tags, if there is a "ul" tag inside the "div" tag and inside that "ul" tag there is a "li" tag available, so it can't select these "li" lags.

Sibling ~ or + Selector

Adjacent sibling selector (+): It will select the second element which immediately follows the first specified element.

h3.sibiling + p{
    background-color: #d685c2;
  }

"Output- It will apply the given property to the exact next and single "p" tag which comes after a "h3" tag whose class is 'sibling'."

General sibling selector(~): It will select all the sibling element which follows the first specified element.

h3.sibiling + p{
    background-color: #d600c2;
  }

"Output- it will apply the given property to all the sibling "p" tags which come after a "h3" tag whose class is 'sibling'."

There are some more pseudo selectors

Pseudo element is used to target the particular area of any HTML element for styling or adding some text, etc.

::after

Using "::after" we can add some content like some text, etc. to an element using the "content" property. The content will be added after the selected element.

h3.pseudo::after{
    content: "Hello ";
}

"Output- It will add the "Hello " text after the content written inside the "h3" tag whose class is 'pseudo'.

::before

Using "::before" we can add some content like some text, etc. to an element using the "content" property. The content will be added before the selected element.

h3.pseudo::before{
    content: "Hello ";
}

"Output- It will add the "Hello " text before the content written inside the "h3" tag whose class is 'pseudo'."

hover:

We can make some changes and decorations while hovering on that particular element using this selector.

li:hover{
    background-color: #2e8c62;
    color: #4d4d4d;
    border: 3px solid white;
}

so, it will apply the given properties to the "li" tag on mouse over or hovering.

**Custom attribute **

a[target="_blank"] {
    background-color:yellow;
}

It will apply the given properties to the "a" tag with a target attribute value of "_blanck".

Please correct me if something is wrong.

** Thank you for reading. **

CSS Selectors

A simple explanation about CSS selectors

Table of contents

CSS

CSS Selectors

Types of CSS Selectors