A CSS selector selects the HTML element(s) you want to style.

What is a selector?

• You have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

Types of selectors :-

There are many basic different types of selectors.

• Element Selector

• Id Selector

• Class Selector

• Universal Selector

• Group Selector

• Attribute Selector

Element selector:

The element selector selects HTML elements based on the element name (or tag) for example p, h1, div, span, etc.

style.css: The following code is used in the above HTML code. You can see the CSS rules applied to all <p> tags and <h1> tags.

  h1 {
    color: red;
    font-size: 3rem;
   }

  p {
    color: white;
    background-color: gray;
 }

Id selector:

The id selector uses the id attribute of an HTML element to select a specific element.

Note: An id of element is unique on a page to use id selector.

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

Class-selector:

The class selector selects HTML elements with a specific class attribute.

style.css: The following code is used in the above HTML code using the class selector. To use class selector you must use ( . ) followed by class name in CSS.

  .paragraph-class {
     color:white;
     font-family: monospace;
     background-color: purple;
  }

Universal-selector:

The Universal selector ( * in CSS is used to select all the elements in a HTML document. It also includes other elements which are inside under another element.

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

Group-selector:

This selector is used to style all comma separated elements with the same style.

style.css: The following code is used in the above HTML code using the group selector. Suppose you want to apply common styles to different selectors, instead of writing rules separately you can write them in groups as shown below.

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

Attribute Selector :

The attribute selector [attribute] is used to select the elements with a specified attribute or attribute value.

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

The parts of a CSS rule

To understand how selectors work and their role in CSS, it's important to know the parts of a CSS rule. A CSS rule is a block of code, containing one or more selectors and one or more declarations.

In this CSS rule, the selector is .my-css-rulewhich finds all elements with a class of my-css-rule on the page. There are three declarations within the curly brackets. A declaration is a property and value pair which applies styles to the elements matched by the selectors.

Pseudo-classes and pseudo-elements

CSS provides useful selector types that focus on specific platform state, like when an element is hovered, structures inside an element, or parts of an element.

Pseudo-classes

HTML elements find themselves in various states, either because they are interacted with, or one of their child elements is in a certain state.

For example, an HTML element could be hovered with the mouse pointer by a user or a child element could also be hovered by the user. For those situations, use the :hover pseudo-class.

   /* Our link is hovered */
    a:hover {
    outline: 1px dotted green;
   }

 /* Sets all even paragraphs to have a different background */
  p:nth-child(even) {
 background: floralwhite;
 } 

Pseudo-element

Pseudo-elements differ from pseudo-classes because instead of responding to the platform state, they act as if they are inserting a new element with CSS. Pseudo-elements are also syntactically different from pseudo-classes, because instead of using a single colon ( : ), we use a double colon ( :: ).

   .my-element::before {
     content: 'Prefix - ';
    }

As in the above demo where you prefixed a link's label with the type of file it was, you can use the ::before pseudo-element to insert content at the start of an element, or the ::afterpseudo-element to insert content at the end of an element.

Pseudo-elements aren't limited to inserting content, though. You can also use them to target specific parts of an element. For example, suppose you have a list. Use ::marker to style each bullet point (or number) in the list

   /* Your list will now either have red dots, or red numbers */
     li::marker {
     color: red;
    }

You can also use ::selection to style the content that has been highlighted by a user.

     ::selection {
       background: black;
       color: white;
     }

For More Information Refer :-

Learn Css

Css Selector

HAPPAY Learning!!!!!!