CSS Selectors are used to select HTML elements that you want to style. Selectors are part of CSS rule set.

Basic Selectors

1. Universal selectors:

Universal selector selects any type and all the elements in the HTML document. It is depicted by * symbol.

Syntax: *{ //css declarations }

Example:

* {
  background-color: grey;
}

It can also be used to select all the child of any particular parent. Here’s how:

div * {
    background-color: green;
}

Other properties of * selector:

ns|* : selects all element within namespace ns

|*: selects all elements without any declared namespace.

*|* : selects all elements.

2. Element Type selectors:

Type selectors are used to select all elements of a given type in a HTML document.

Syntax: html_element{ //css declarations }

Example:

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

3. Class Selector:

Class selector selects all elements belonging to the particular class attribute. It is depicted by .class symbol.

Syntax: .classname{ //css declarations }

Example:

.classname {
  text-align: center;
  color: red;
}

4. Id selector:

ID selector selects all elements belonging to the particular ID attribute. It is depicted by #id symbol.

Syntax:

#id_name{ //css declaration }

Example:

#id_name {
  text-align: center;
  color: red;
}

5. Attribute selector:

Attribute selector selects all elements that have the given attribute.

Syntax: [attribute name]{ //css declaration}

Example:

[class] {
                text-align: center;
                Color: green;
            }

Combination selectors:

6. descendant selector (space)

Descendant selector selects all the elements that are descendants of the specified element.

Syntax: element1 element2{ //css declaration}

Example:

div p {
  background-color: grey;
}

7. child selector (>)

Child selector selects all the elements that are direct child of the specified parent element.

Syntax: element1>element2{ //css declaration}

Example:

div > p {
  background-color: grey;
}

8. adjacent sibling selector (+)

Adjacent sibling selector selects the element that is just directly after the specified element.

Syntax: element1+element2{ //css declaration}

Example:

div + p {
  background-color: grey;
}

9. general sibling selector (~)

General sibling selector selects all the elements that follows the first mentioned element such that they are the children of same parents.

Syntax: element1~element2{ //css declaration}

Example:

div ~ p {
  background-color: yellow;
}

10. Group selector

Group selector selects all the comma separated elements and style them.

Syntax: element1, element2{ //css declaration}

Example:

h1, #idname, p {
  background-color: yellow;
  color: black;
}

Pseudo-selectors:

Pseudo-class:

Pseudo-class defines special state of the selected element. It is added to the selector to add an effect to an element based on their state.

Some examples of pseudo classes:

Lets see how to use these pseudo-classes in styling :

a:hover {
  color: #FF00FF;
}
a:link {
  color: #FFFFFF;
}
input:focus {
  background-color: yellow;
}
a:active {
  color: #000000;
}
p:first-child {
  color: blue;
}
p:last-child {
  color: blue;
}
div:nth-child(2) {
  background: red;
}

Pseudo-element:

Pseudo-element allows you to style specific part of specified element. Some examples of pseudo-elements:

Lets see how to use these pseudo-elements in styling :

p::before {
  content: "inserted content before using pseudo-element ";
}
p::after {
  content: "inserted content after using pseudo-element ";
}

That's all about selectors in CSS. Happy coding!

References: MDN W3 Schools