Understanding selectors in CSS

I. What are Selectors?

Selectors are choices used to query HTML elements in order to style them with CSS.

For example, if we want to style all span tags in a HTML document, we use selectors as follows:

span{
  color:red;
}

II. Common types of selectors

1. Universal Selector ()

The universal selector () will apply to all HTML tags on the webpage. Many people often misuse it to reset CSS, for example, to set all tags to have margin 0 and padding 0. In my opinion, it is not recommended. It is best to create a class with margin 0 and padding 0 and when needed, add that class to the necessary HTML tag.

For example, CSS affecting all HTML tags

*{
    color: blue;
}

In addition, the universal selector (*) can be used to select all elements within an HTML element.

For example, CSS for elements in the HTML tag with the container class.

.container * {
 border: 1px solid red;
}

2. TagName Selector

The TagName selector will apply to HTML tags with the specified tag name.

For example, CSS for div tags.

div{
  padding: 0px;
}

3. Class Selector

The Class selector will apply to all HTML tags with the specified class. With the class selector, we can reuse them. This is the fundamental difference between a class selector and an id selector.

For example, CSS for HTML tags with the Class of banner.

.banner{
    color: red;
}

4. ID Selector

The ID Selector will affect all HTML tags that have the ID it specifies.

For example, CSS for HTML tags with the ID banner.

#banner{
    color: red;
}

5. Hierarchical Selector

The Hierarchical Selector allows us to apply CSS to HTML tags according to parent-child relationships.

For example, CSS for all p tags inside a div tag. The 'div' tag is the parent of the p tag.

div p{
    color: #fff;
}

For example, CSS for all span tags inside a p tag with the class detail. The detail class is the parent of the span tag.

.detail span{
  color: blue;
}

For example, CSS for all li tags within a div tag with the ID category. The category ID is the parent of the ul tag, and the li tag is a child of the ul tag.

#category ul li{
  padding: 0px;
}

6. Multiple Tag Selector

A multiple tag selector allows us to apply CSS to multiple tags that we want to format the same without having to rewrite the CSS.

For example, apply CSS to several tags such as span, p, h3.

span, p, h3 {
  color: red;
}

7. Other types of selectors

X:link: formats all links that have not been clicked.

a:link { 
  color: red; 
}

X:visited: formats components that have been clicked.

a:visted { 
  color: purple; 
}

X:hover: formats elements when the mouse hovers over.

a:hover{
  color: red;
}

X:active: formats activated elements.

a:active{
  color: blue;
}

X:before and X:after: add content before and after the selected element.

p:before{
  content : "Kiếm tiền từ Web"
}
p:after{
  content : "Tác giả: Ngọc Phương"
}

X:first-child: formats the first element of the parent that contains it.

div p:first-child {
    color: red;
}

X:first-letter: formats the first character of the parent that contains it.

div p:first-letter {
    color: red;
}

X:first-line: formats the very first line of an element.

div p:first-line {
    color: #ff0000;
}

X:focus: formats the focused element.

input:focus {
	background: red;
}

X + Y: formats the element immediately following the declared selector.

ul + p {
   color: red;
}

X > Y: X > Y is different from X Y in that X > Y will take the direct child Y of X, not all other children.

div#container > ul {
  border: 1px solid red;
}

X:not(Y): apply CSS styling only to those elements that are not the selected element.

*:not(p) {
  color: green;
}

X[target]: applies CSS based on the attribute of the selected element

a[title] {
   color: red;
}