Understand CSS Selectors

As the name suggest, CSS selectors are used to select and provide a style to an element.

The CSS selectors are mainly divided into:

*Basic Selectors: These selectors select the elements based on class, id, and name.*

1.Universal selector: It uses the asterisk(*) or star as a symbol and it selects the entire webpage.

* {
background-color: black;
color: white;
}

2. id-selector: It selects the id attribute of the HTML element and select the specific element.Below is the syntax used for id-selector.

#div-container{
    color: blue;
    background-color: gray;
}

3. class-selector: This selector select the HTML elements which are inside the class. The syntax used for class-selector is (.) followed by the class name in the CSS code.

.classname{
background-color: black;
color: white;
  font-family: Montserrat;

}

4. Group-selector: Suppose you want to style different selectors or elements on the webpage with the same style and writing separate rules for every selector is a brain teaser instead we can write it in a comma separated style. Below is the example given for the same.

#div-container, .paragraph-class, h1{
       background-color: purple;
        color: white;
         font-family: monospace;    
}

5. Attribute Selector : This selector is used to select the elements with specific attribute or values. The syntax to write attribute selector is shown below. It uses [] symbol and the attribute should be defined in the [] as [attribute].

[attribute] {   background-color: Red;
   color: black;
   font-family: monospace;
   font-size: 1rem;
   }

Combinator Selectors: In these type of selectors, it selects the combination of properties and attributes of the elements. Below are the example given:

1. General Sibling selector: (~): The selector select the elements which are next siblings of the specified elements. The symbol used is (~).

.class ~ p {
      text-align: right;
       color: black;
}

Here, It targets the paragraph that comes after the class.

2.Child-selector: It selects all the elements that are the children of a specified class or id. The symbol used for child-selector is (>) . Below is the code to understand the child-selector.

div > p {
    color: black;
    background-color: yellow;
    font-family: “Montserrat”;
}

The above code selects all the paragraphs that comes into the specified class.

3.Adjacent Sibling Selector(+): This selector selects the immediate sibling of the specified class, id. (+) symbol is used to specify a child selector. Below is the code for Adjacent Sibling Selector.

div + p {
    color: white;
    background-color: black;
    font-family: “Montserrat”;
}

pseudo selectors

1.hover:pseudo-class selector: : It will change the color and style of hovering when hovered over it. We can specify different styles of Below is the code for hover:pseudo-class selector.

div :hover {
  background-color: blue;
  text-decoration: underline;
}

2.first-child pseudo class selector : It selects the first child of the any element and gives the property according to mentioned details. Below is the code for your reference.

p :first-child{
  color: blue;
  text-align: center;
}

3.Last-child pseudo class selector : It selects the last child of the any element and gives the property according to mentioned details. Below is the code for your reference.

p :last-child{
  color: black;
  text-align: left;
}

4.nth-child pseudo class selector : It selects the nth child of the any element and it can be given different values and selection can be done accordingly. Below is the code for your reference.

p :nth-child{
  color: Red;
  text-align: right;
}

5.::before pseudo element : This selector is used to put content before the specified element. the code for this selector is mentioned below:

h1::before {
  content: url(pic.png);
}

6.::after pseudo element : This selector is used to put content after the specified element. the code for this selector is mentioned below:

h1::after{
  content: url(pic.png);
}

Hope you got the clear understanding of the CSS selectors. Happy Coding!