INTRODUCTION

CSS elements are used to target multiple or single elements in our webpage. With the help of these selectors we can do styling and perform the task which we want to do.

TYPES OF CSS SELECTORS

BASIC SELECTORS

Universal selector:

The universal selectors select all the Html elements in our web page. It is denoted by *. Mostly people used this to remove the default margins and padding on the web page.

Example:

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
     }

Type selector:

This selector is used whenever we want to target the specific Html elements in the web page. Like h1, p, li etc.

Example:

p{
  background-color: green;
  font-size:30px;
  }

Class selector :

This selectors help us to target all the specific elements which have the same class name defined in the class attribute. whenever we have to use a class we have to place a dot first then write the class name.

Example :

.main{
  height:20px;
  background-color: grey;
}

ID Selector:

It selects an element based on their id attribute. Their should be only one element with this unique id. It is denoted by # in css.

Example :

#id-selector{
background-color: blue;
margin: 20px;
}

Group Selector:

It is represented by a comma (,) .It is used to group multiple selectors at the same time and apply the style on it.

Example:

p,h1,span{
background-color: violet;
padding:20px;
}

Combinators

Descendant Combinator

It is represented by a space character which is used to select the elements inside the tags.

Example:

li a{
  text-decoration: none;
 } 

Child combinator

It is represented by > which selects one or more elements which is the direct child of its parent element.

Example :

  ul > li{
   margin:10px;
   color: violet;
  }

General siblings combinator :

It basically selects the siblings. This means it selects all the elements next to its parent element. It is represented by ~.

Adjacent siblings combinators :

It is represented by + which is used to selects the very immediate element next to its parent.

Example:

h1+p{
   background-color: red;
}

Pseudo Classes

what is pseudo class??

CSS pseudo-classes are used to add styles to selectors, but only when those selectors meet certain conditions. A pseudo class is expressed by adding a colon (:) after a selector in CSS, followed by a pseudo-class such as "hover", "focus", or "active", like this:

:hover - it is used to do various effect when we placed or move our mouse cursor on the element .

Example :

 .btn:hover {
     background-color: red;
     color: white;
  }

:focus - The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

Example :

input:focus {
  background-color: brown;
}

lets say we have a form and when we click inside the input field to enter our name the color changes to brown.

active : - The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

Example :

 .btn:active{
   background-color: orange;
   padding: 10px;
   color:white;
}

Active will triggered on a button when a user click on that particular button.

:first-child-It will select the first specified element in the document and applies the required styling.

Example -

 li:first-child {
   margin: 10px;
   background-color: #42a192;

}

:last-child-It will select the last one of the specified element in the document and applies the required styling.

Example:

 li:last-child {
        margin: 10px;
        background-color: #42a192;
  }

nth child:The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b).

Example :

  p:nth-child(odd) {
         background: red;
   }

  p:nth-child(even) {
        background: lightgreen;
  }

Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

Here, we specify two different background colors for odd and even p elements

 p:nth-child(3n+0) {
         background: red;
}

Here, we specify a background color for all p elements whose index is a multiple of 3 (will select the third, sixth, ninth, etc.)

Pseudo elements

::before ::after- It is basically used to add the content before and after to the element. It has a property named as content .They are inline by default. ::before is used to add content before the element and ::after is used to add content after the element.

Examples-

p::before {
   content: "« before";
   color: blue;
}

p::after {
    content: "After  »";
    color: red;
}

Difference between pseudo-class and pseudo-element

The two main differences between a pseudo-class and pseudo-element are:

1. Pseudo-elements are preceded with two colons :: instead of one, although these days modern browsers are more forgiving and support both : and double :: colons for the pseudo-elements. It is best practice to use double colons ::

2. Pseudo-classes are all about the state, states like a visited link, a focused input field, an image that is being hovered upon, e.tc. While pseudo-elements are used to style sections or a particular part of an element, things like the first letter in a word, first-line e.tc.

I hope you enjoyed this post and that it helps us on our way to becoming better front-end developers. That's all for today! You reached the end of the article .