The selectors point to the HTML element you want to set the style. The selector is the technique to give any kind of style to your text on your HTML page.

The CSS Selectors

There are different types of selectors:

Basic selectors

• Universal selector

The universal selector works like a wild card character, selecting all elements on a page

*{
   color: white;
   font-size: 12px;
}

• Type selector

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.

/* All <a> elements. */
a {
  color: red;
}

• Class selector

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters.

.main{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

HTML

<div class="main">Hello World!</div>

• ID selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.

#main{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

HTML

<div id="main">Hello World!</div>

• Attribute selector

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

a[target] {
  background-color: yellow;
}

Grouping selectors

• Selector list

The , selector is a grouping method that selects all the matching nodes.

/* Selects all matching elements */
span,
div {
  border: red 2px solid;
}

Combinators

• Descendant combinator

The descendant combinator typically represented by a single space (" ") character combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector.

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

• Child combinator

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

• General sibling combinator

The general sibling selector selects all elements that are next siblings of a specified element. and are children of the same parent element.

/* Paragraphs that are siblings of and
   subsequent to any image */
img ~ p {
  color: red;
}

• Adjacent sibling combinator

The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

• Column combinator

The column combinator (||) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.

/* Table cells that belong to the "selected" column */
col.selected || td {
  background: gray;
}

Pseudo

• Pseudo classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements. For example, :hover can be used to change a button's color when the user's pointer hovers over it. Examples :lang :- Select an element based on its content language. :any :- link:- Matches an element if the element would match either :link or :visited. :target :- Matches the element which is the target of the document URL. :scope :- Represents elements that are a reference point for selectors to match against.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

• Pseudo elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements. For example, ::first-line can be used to change the font of the first line of a paragraph.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}