A CSS selector is the part of a CSS rule set that selects the HTML element you want to style.
Here’s how you use them:
1. UNIVERSAL SELECTOR:
A “\*” is used to define a universal selector in CSS. It can select and style all elements in the HTML file.
```
1. ELEMENT SELECTOR:
It selects and styles all elements of the specified name/type.
```
h1 {
color: green;
}
```
This will apply the style to all `
1. CLASS SELECTOR:
A dot (“.”) is used to specify a class selector. It styles elements of the given class.
```
.myClass {
text-align: center;
}
```
This will apply the style to all elements with `class=“myClass”`.
1. ID SELECTOR:
The ID selector uses a hash (“#”) to style a single, unique element with the specified ID.
```
#myID {
color: blue;
}
```
This will apply style to the element with `id=“myID”`.
1. ATTRIBUTE SELECTOR:
This selector selects and styles elements with a specific attribute or attribute value.
```
a[target=”_blank”] {
background-color: yellow;
}
```
This will style all `a` elements that have the `target=”_blank”` attribute.
1. PSEUDO CLASS SELECTOR:
A pseudo-class is used to select specific states of an element.
```
a:hover {
color: red;
}
```
This will apply the style only when the mouse cursor hovers over `a` tags.
1. PSEUDO ELEMENT SELECTOR:
These are used to select and style a part of an element.
```
p::first-letter {
font-size: 200%;
}
```
This will apply the style to the first letter of every paragraph.
1. COMBINATION SELECTORS:
You can also combine multiple selectors to target elements in a more specific way.
For example, to select only `p` elements inside `.myClass` elements, use:
```
.myClass p {
color: blue;
}
```
1. GROUPING SELECTORS:
If you want to style multiple elements the same way, you can group them like this:
```
h1, h2, p {
color: green;
}
```
This will apply the style to `h1`, `h2`, and `p` tags. The commas work as logical OR operators.
Remember, each declaration block contains one or more declarations separated by semicolons and each declaration includes a CSS property name and a value, separated by a colon.
