If you ask someone , You know HTML & CSS ? The obvious answer is that "Yes I Know it." But when we assign something to do with it , They just stuck with it and not able to do well . The reason is, not well enough knowledge of Selectors ! So in this article we are going to discuss about CSS Selectors .

There are five selector in css:

1. Simple Selector
2. Combinator Selector
3. Pseudo-class Selector
4. Pseudo-element Selector
5. Attribute Selector

Simple Selector

Simple selector means you can directly select tags, ids, classes.

• Element(Tag) Selector: Element selector means you can directly select any tag.

  for eg:

     h1 {
         font-size: 20px;
         color: purple;
         }
  

  • Id Selector: The Id of an html page is unique so the id selector select one unique element. to select specific id you can use hash (#) symbol.

for eg:

        #text {
               color: gray;
               font-size: 15px;
            }

• Class Selector: The class selector select HTML element with a specific attribute. to select specific class use period (.)

for eg:

      .info{
              text-align: center;
              color: gray;
            }

• Universal Selector: The universal selector select all HTML element on the page.

for eg:

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

• Grouping Selector: You can also select multiple elements at a time if they have same property.

for eg:

          h1,h2,p {
               text-align: center;
                color: gray;
              }

Combinator Selector

Combinator selector contain more than one simple selector. Between two simple selector you can add combinator.

There are four type of combinator

• Descendant Selector (space)
• Child Selector (>)
• Adjacent Sibling Selector( +)
• General Sibling Selector (~)

• Descendant Selector: The descendant selector matches all element(tag) that are descendant of specific element.

for eg:

      div h1{
            font-size: 20px;
            color: purple;
        }

• Child Selector: The child selector select all element that are children of a specific element.

for eg:

div > p {
        color: gray;
    }

• Adjacent Sibling Selector: Adjacent sibling selector select first element that are placed immediately after the element.

for eg:

    div + p {
              text-align: center;
              color: pink;
              }

• General Sibling Selector: The general sibling selector select all the element that are next sibling of an element

for eg:

div ~ p {
              text-align : center;
              color: gray;
        }

Pseudo-classes

Pseudo class selector is used to change special state of an element.

for eg:

    a:hover {
        color: blue;
      }

Pseudo-element

Pseudo element is used to style first letter, last letter, content before, after.

for eg:

    h1: first-letter {
          color: orange;
      }

Attribute Selector

It is also possible to style HTML elements that have specific attributes. The [attribute] selector is used to select elements with a specified attribute.

for eg:

  input [type = "text"] {
              background-color : black;
               width: 100%;
}

I hope you guys can easily understand the css selector now.