# CSS Selctor guide

# CSS - Cascading Style Sheets ...in simple language it is something which gives structure, cosmetic effects and lot more functionality to your HTML page...

### To apply these effect, and place them in desire position on page you need to select correct object.

### Following are the basic selectors types we usally need.

### 1. Element type selector
It selects element by name `<elment name>` from html page
```css
h1{
font family: poppins;
font weight: 200;
}
```

### 2. Id selector
ID can be selected by placing prefix `#` before its ID name. be careful, we get consufed between ID and Class selector whille selecting them.
```css
#id-test{
border: solid;
color: #ffff;
}
```

### 3. Class selector
to select class we put `.` as prefix to its class name.
```css
.test-class{
border: solid;
color: #ffff;
}
```

### 4. Universal selector
sometimes there are condition where we need to target all elements in html page, which can be achived with `*` selector
```css
*{
border 0;
margin 0;
}
```

### 5. group selector
we can select multiple items by placing their name seperated by `,` to apply same style to all of them
```css
h1, h2{
border 0;
margin 0;
}
```

### 6. chained selector 
When writing CSS rules, it’s possible to require an HTML element to have two or more CSS selectors at the same time.

This is done by combining multiple selectors, which we will refer to as chaining. For instance, if there was a `.special` class for `h1` elements, the CSS would look like:
```css
h1.special {
 
}
```
The code above would select only the h1 elements that have a class of `special`. If a `p` element also had a class of `special`, the rule in the example would not style the paragraph.

### 7. Direct child selector
Child selector is used to target child of parent. in syntax we need to put '>' between parent and child element.
in below example `h2` is inside `div` which we are targeting to apply font style.
```css
div > h2{
font-family: poppins;
font-size; 20px;
{
```

### 8. Sibling selector
sibling selectors selects an element that is directly after specific element. in following example we are targetting first `<n>` th element after `div`.
```css
div + n{
color: #ffff;
}
```
also there is option to select all sibling of the parent by putting '~' after parent as in follwoing example
```css
div ~ n{
color: #ffff;
}
```
it will select all n elements after parent div.

### 9. Pseudo selector
A pseudo-class is used to define a special state of an element.

it can be used to:
- Style an element when a user mouses over it - `:active`
- Style visited and unvisited links differently - `:visited`
- Style an element when it gets focus - `:hover`

```css
/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}
```