CSS Selectors 101: Targeting Elements with Precision

What is a selector?
css selectors are the styling set of properties which are grouped together for

(1) .class{

}

(2) .CLASS{

}

These two properties are different because css is the case sensitive.

Types of Selectors

1) Element Selector: Element selector defines a selection rule for that element.

The p selector selects all the paragraphs, h1 selector selects the h1 heading.

css
h1 {
  background: pink;
}


2) **Class Selector**:
Class selector defines the css properties for the class and purpose of class selector define the unique properties for the class, for ex.

'''css
.pink{
  background:pink;
}

3) Universal Selector (*):

This selector targets all elements on a page. It’s like saying, “Hey, style the full page” For ex, if you want to apply a font to all text,default margin and padding you’d use 

'''css
* { font-family: Arial; margin:0;padding:0;}

4)ID Selector (#idname):(focus is unique, id is unique)

This prefers a element with a specific ID.
 For example, #footer will style the element with the ID "footer". It’s just saying, “I will style this one unique item.”

5)Attribute Selector:

We Nominate elements based on their attributes. For example, input[type="text"] will prefer all text input fields. It’s like saying, “Style all input boxes that are for text.

6)Pseudo-class Selector:

This appoints styles depends on the state of an element. For instance, a:hover will style links when a user hovers over them. It’s like saying, “Make this link look different when someone points at it.

a:hover{
  background:pink;
}

Pseudo-element Selector:

This applies a specific part of an element. For example, p::first-line styles just the first line of a paragraph. It’s like saying, “Make the first line of every paragraph special.

p::first-line {
  color: blue;
  font-variant: small-caps;
  font-size: 30px;
}