Element selectors will select html elements based on which element name you have.
Example: < h1 >
Syntax
element {
color: red;
}
Group selector will group all the html element that you want to be style the same.
Syntax
h1, h2, h3 {
color: red;
}
Best to use this selector is when you want to style an html element the same.
Descendant selector will select all elements that are descending of a specified element.
Example: div p {
}
Best to you when you want to style and element inside another element.
Class selector selects html elements with a specific class attribute.
Example: < h1 class="food" >Pizza< /h1 >
Best to use class selectors when you want to style multiple elements at the same time with the same style.
Syntax
.class {
color: red;
}
ID selectors uses the id attribute in html element to select specific element. The id of an element has to be unique within the page, so it’s only to select one unique element.
Example:
#car {
color: red;
}
Best time to use is when you want a unique element
Syntax
#id {
color: red;
}
Universal selectors is the * in CSS. The asterisk is essential a type selector that matches any type. Type meaning HTML tag like < div >, < body >, and < p >.
Syntax
* {
color: red;
}
A pseudo-class is used to define a special state of an element.
Example:
Syntax
selector:pseudo-class {
property: value;
}
A CSS pseudo-element is used to style a specified parts of an element.
Example:
Style the first letter, or line, of an element Insert content before, or after, the content of an element
Syntax
selector:pseudo-element {
property: value;
}