Selectors

A **CSS Selector **selects HTML elements that you want to style in the document.

---

Basic Selectors

1. Universal Selector

Selects all the elements. ***Synax: *** * ***Example: *** * it will match all the elements in the document.

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

2. Class Selector

Selects all the elements with class attribute. ***Synax: *** .classname ***Example: *** .blog it will match all the elements in the document with class name "blog".

.blog {
      color:white;
}

3. ID Selector

Selects all the elements with id attribute. ***Synax: *** #idname ***Example: *** #section1 it will match all the elements in the document with id name "section1".

.section1 {
      color:white;
}

4. Type Selector

Selects all the element with given node name. ***Synax: *** input ***Example: *** <input> it will match all the elements in the document that are <input> elements.

input {
    color:white
}

5. Element Selector

Selects all the elements based on element name. ***Synax: *** element ***Example: *** h1 it will match all the h1 elements in the document.

h1 {
    color:white
}

---

Grouping Selector

1. Selector list

The , selector will select all the matching nodes. ***Synax: ***A,B ***Example: ***div,span will match all the div and span elements in the document.

div,span {
    color:white;
}

---

Combinators

1. Child Combinator

The > Combinator will select direct children of the first element. ***Synax: ***A>B ***Example: ***div>span will match all the span elements nested directly under the div element in the document.

div>span {
    color:white;
}

2. Descendant combinator

The (space) combinator select all the decendants of the first element. ***Synax: ***A B ***Example: ***div span will match all the span elements under the div element in the document.

div span {
    color:white;
}

---

Pseudo-classes and pseudo-elements

1. Pseudo-classes

The : pseudo allows to select the element based on state information. ***Example: *** a:hover will match all the a that are being hovered upon.

a:hover {
    color:white;
}

2. Pseudo-elements

The :: pseudo allows to select the element based on state information. ***Example: *** p::firstline will match all the first line of <p> elements.

p::firstline {
    color:white;
}