

# Lekce 3



# CSS Selektory


# Pomocí typu tagu

```
p { }
```


# Pomocí třídy

```



.trida { }
```


# Více tříd

```


.trida { color: red; }
.druha-trida { background-color: blue; }
```


# Pomocí id

```


#id { }
```


# Specificita vs košile bližší než kabát

```
text

.a { color: red; }
.b { color: blue; }
```


# Specificita 

* +1 - typ tagu
* +2 - třída
* +3 - id

DEMO


# Kombinované selektory 

```
.a .b {} /* tag s třídou b vnořený v tagu s třídou a */
.a, .b {} /* tag s třídou a nebo b */
.a > .b {} /* tag s třídou b, přímý potomek tagu s třídou a */
```


# Pseudotřídy - Umístění

* `p:first-child{}`, `p:last-child{}`
* `p:first-of-type{}`, `p:last-of-type{}`
* `p:nth-child(n){}`


# Pseudotřídy - Stav

* `a:link{}`, `a:visited{}`
* `a:hover{}`, `a:active{}`, `a:focus{}`

DEMO



# Děkuji za pozornost