Introduction to CSS selectors

CSS selectors:

CSS selectors are used to select the HTML elements to which we can stylize and give different properties.

There are different types of CSS selectors and they are as follows -

Universal selector:

The Universal selector helps us to select all the elements within that page.

Syntax:

* { 
   style properties 
}

Example:

<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span>This is line three.</span>

* {
   color: #E21717;
}

Result:

Individual selector:

The Individual selector selects the element using the element name.

Example:

<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span>This is line three.</span>

p {
   color: #E07C24;
}

Result:

Class selector:

The Class selector selects the element based on the content defined inside the class attribute.

Syntax:

.class-name {
   style properties
}

Example:

<!-- This is HTML code -->

<p>This is line one.</p>
<div class="two">This is line two.</div>
<span>This is line three.</span>

.two {
   color: #1FAA59;
}

Result:

ID selector:

The ID selector selects the element based on the content defined inside the id attribute which is unique and should not be defined inside any other element.

Syntax:

#id-name {
   style properties 
}

Example:

<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span id="three">This is line three.</span>

#three {
   color: #F7CD2E;
}

Result:

And selector:

The And selector allows the selection of specified element with the specified class.

Syntax:

.class-one.class-two {
   style properties
}

Example:

<!-- This is HTML code -->

<p class="car automobile">BMW</p>
<p class="car">Mercedes</p>
<p class="car">Audi</p>

.car.automobile {
   color: #2827CC;
}

Result:

Combined selector:

The Combined selector helps us to select multiple elements/items by separating them with commas.

Syntax:

p, div, span {
   style properties
}

Example:

<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span>This is line three.</span>

p, div, span {
   color: #FF6263;
}

Result:

Inside selector:

The Inside selector selects all the elements that are descendants of a certain element.

Syntax:

div p {
   style properties
}

Example:

<!-- This is HTML code -->

<p>Different car brands:</p>

<div>
<p>BMW</p>
<p>Mercedes</p>
<p>Audi</p>
</div>

div p {
   color: #FF6666;
}

Result:

Direct child selector:

The Direct child selector selects the element that is a direct child to their parent element by using > in between them.

Syntax:

div > p {
   style properties
}

Example:

<!-- This is HTML code -->

<div>
<span>BMW</span>
<p>Mercedes</p>
</div>

div > p {
   color: #5737D6;
}

Result:

Sibling selector:

General Sibling selector: The General Sibling selector is used to select all the given elements that are upcoming siblings of a certain element.

Syntax:

div ~ p  {
   style properties
}

Example:

<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span>This is line three.</span>
<p>This is line four.</p>
<p>This is line five.</p>

div ~ p {
   color: #b2de27;
}

Result:

Adjacent Sibling selector: The Adjacent Sibling selector selects the sibling element that follows immediately after a certain element.

Syntax:

div + p {
   style properties
}

Example:

<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<p>This is line three.</p>
<p>This is line four.</p>

div + p {
   color: #50DBB4;
}

Result:

Pseudo selector:

Pseudo-element: A Pseudo-element is used to stylize a particular part of the element by using a variety of keywords that have been made available to us. We always need to use the "content property" to make the Pseudo-element work.

Syntax:

element-name::before {
   content: ;
   style properties
}

::before Pseudo-element: The ::before Pseudo-element is used to add content before the content which is inside the specified element.

Example:

<!-- This is HTML code -->

<p>This is two.</p>

p::before {
   content: "This is one.";
   color: #758283;
}

Result:

::after Pseudo-element: The ::after Pseudo-element is used to add content after the content which is inside the specified element.

Example:

<!-- This is HTML code -->

<p>This is one.</p>

p::after {
   content: "This is two.";
   color: #758283;
}

Result:

Pseudo-class: A Pseudo-class is used to specify a special state of an element by using a variety of keywords that have been made available to us.

Syntax:

element-name:hover {
   style properties
}

:hover Pseudo-class: The :hover Pseudo-class is used to apply the hover effect to an element so that every time you place your mouse cursor over it, it will display its special state according to the styles applied to it.

Example:

<!-- This is HTML code -->

<span>This is line one.</span>

span:hover {
   background-color: #000000;
   color: #ffffff;
}

Result:

Thank you!