CSS Selectors

CSS Selectors

Table Of Contents:

  • What is Selector
  • Universal Selector
  • Individual Selector
  • Class and Id selector
  • Chained Selector
  • Inside an Element Selector
  • Direct Child Selector
  • Sibling Selector

    Pseudo Class Selector

  • What is Pseudo Class Selector
  • Before
  • After

What is Selectors

The CSS Selectors are used to select HTML elements and then you style it. It is a CSS Rule. CSS Selectors selects HTML element by using it's id, class, type, attribute etc.

There are several types of Selectors in CSS

Universal Selector

The Universal Selector Select all the html elements in a HTML document. For Universal Selectors you can use asterisk character (*).

Example:
HTML
<h1>Universal Selector</h1>
<p>Lorem ipsum dolor sit amet.</p>
<span class="text">Hello World</span>
<p>Lorem ipsum</p>

CSS
 * {
       color: blue;
   }

In that example all the elements of text color changes to blue.

Individual Selector

The Individual Selector means you can select any element on your html document then you can apply styles on them. You can select any particular element and it can selects all that elements that are on html document and it can style it.

Example:
HTML
<h2>Individual Selectors</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>HTML</li>
<li> CSS</li>
<li>JS</li>
<li>React</li>
</ul>
<span>Code<span>

CSS
span {
             text-align: center;
         }

In the above example the span tag will get centered.

Class and Id Selector

This Selectors can select specific elements that have a class and id on them for styling it. The Class Selectors select html elements that have a specific class attribute. The Class can define by dot (.). The Id Selectors selects html elements that have a specific unique id attribute. The Id can define by hash(#) character while writing CSS.

Example:
HTML
<h1 id="heading">Class and Id Selector</h1>
<p class="para"></p>
<span>Google</span>

CSS
.para {
          background-color: orange;
          }

#heading {
           background-color: yellow;
             }

In that example the .para class has changed the background-color to orange and the #heading id has changed the background-color to yellow.

Chained Selector

Chained Selector are used to select the element you want to style.

Example:
HTML
<p class="para1 para">This is first paragraph</p>
<p class="para">This is second paragraph</p>
<p class="para1 para">This is third paragraph</p>

CSS
p.para1.para {
        font-weight: bold; 
  }

In the above example the p tag of a class name para1 para will change the text to bold.

#Combined Selector The Combined Selectors is used to select multiple elements and style them together with same CSS property to apply it and it is separated by comma(,).

Example:
HTML
<h3>Combined Selector</h3>
<p>This is a paragraph</p>
<span>Lorem ipsum dolor sit amet consectetur adipisicing. </span>

CSS
h3, p, span {
            font-size: 40px;
}

In the above example the h3, p and span tags text font-size will change to 40px.

Inside an Element

Inside an Element means you can select those elements that are inside an element.

Example:
HTML

<ul>
    <li>This is a Link<a href="#">Home</a></li>
 </ul>

CSS
ul li a {
       text-align: centre;
}

In the above example the inside of li tag, the anchor tag will get centered.

#Direct Child Selector The Direct Child Selector selects that element that are a direct child of a parent element.

Example:

HTML
 <ol>
   <li>This is list1</li>
   <li>This is list2</li>
 </ol>

CSS
 ol > li {
       color : green;
}

In this example ol is a parent element and li a direct child element that color change into green.

Sibling Selector ~ or +

Sibling Selectors are of two types first is Adjacent Sibling Selector(+) and second is General Sibling Selector(~).The Adjacent Sibling Selector(+) select that element that is directly after another of specific element. The General Sibling Selector (~) selects all elements that are next siblings of a specified element.

Example:
HTML

<ul>
   <li>option1</li>
   <li class="sibling">option2</li>
   <li>option3</li>
   <li>option4</li>
</ul>

CSS
 .sibling + li {
      background-color: pink
}

In this example the option3 background-color change to pink.

What is Pseudo Class Selector

Pseudo element is the keyword added to a selector that lets you style a specific part of the selected element. We can target the area which is not provided in HTML using the pseudo elements. A pseudo class is expressed by adding a colon (:) after a selector in CSS and a pseudo-class such as hover, focus, or active.

Before

The ::before selector is used if you want to insert content before a particular element. Use the content property to specify the content to insert.

Example:
HTML
<p>ipsum</p>

CSS
p::before {
content='Lorem ';
 }

In that example Lorem is display before the ipsum word.

After

The ::after selector is used if you want to insert content after a particular element.

Example: HTML
<p>Hello</p>

CSS
p::after{
content='World!'; 
}

In this example 'World' will get displayed after the 'Hello' .