# CSS Selectors & Class Declarations
Let's resume our learning:
Recap
CSS Syntax:
![css-selector.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659518230232/CCxHw58lK.png align="left")
HTML has tags & CSS has selectors.
Selectors are the names given to styles in internal and external style sheets.
There are specific types of selectors in CSS, let's take a closer look at them:
- **Universal Selector**: It selects all the HTML elements of the web page. It is represented using *.
Ex: ```* {
color: blue;
}```
This will change the text colour to blue for all the html elements on the page.
- **Class Selector:** It selects the HTML elements that contains the class name followed by period character. It is represented using period character(.)
Syntax: ```.class_name { property: value }```
Ex: ``` My colour is changed.
```
CSS: ```
.check1{
color: green;}```
In above example, the colour of the text changes as it access the class name & change the properties.
- **ID Selector:** It is used to select the specific element using the id attribute of HTML element. It is represented using #.
*Important: ID name can't start with a number.
*
Syntax:
```#id_name { property: value }```
Ex: ``` My colour is changed.
```
CSS: ```#unique{ color: pink;}```
In above example, the colour of the H1 changes as it access the id name & change the properties.
- **Type Selector:** It is used to target specific HTML elements via its name & change the properties.
Ex: ``` My colour is changed.
```
CSS: ```h1{ color: yellow;}```
In above example, we are directly accessing the html tag H1 & changing its properties i.e. colour of the text changes to yellow here.
- **Grouping Selector:** It selects all the HTML elements having the same styling definitions at once.
(Importance: Minimising code)
We need to separate each selector with a comma.
Ex:
```
I am link.
I am heading 6.
My colour is yellow. checking group selector working
```
CSS: Instead of doing this:
```
a{ color: blue;}
h6{ color: blue;}
p{ color: blue;}
```
We do this:
```
h1,h6,p{ color: blue;}
```
In above example, we are directly accessing the html tags a, h6, p & changing their styling as they all have same definitions so we have grouped them using group selector.
- **Pseudo-class & Pseudo-element selector:** It is used to define special state of any particular element and pseudo-elements are used to specify particular parts of the elements.
Pseudo-class syntax:
```
selector:pseudo-class {
property: value;
}
```
Pseudo-element syntax:
```
selector:pseudo-element {
property: value;
}
```
Let's say if we want to change the style of an element here button when the user hovers over the button then all of that can be done using these pseudo-classes & elements.
```
button:hover {
color: red;
}
```
Here the color of the button changes to red when the user's pointer hovers over it.
*Checkout our previous blogs as well.*
**Happy Learning!!**