# Kijelölők
## Mire szolgál a CSS kijelölő?
A **kijelölők** segítenek kiválasztani azokat a HTML elemeket, amelyekre CSS stílus szabályokat szeretnénk alkalmazni. Minden stílusnak tartalmaznia kell egy kijelölőt, amit úgy kell elképzelni mint egy címzést, ami egy, vagy több elemre hivatkozik.
A következő példában, a HTML állományunkban elhelyzünk egy`h1` címet:
{% code title="" %}
```markup
Helló világ
```
{% endcode %}
A HTML elemek megjelenését CSS stílusokkal tudjuk befolyásolni, a lenti példában a `h1` elem szövegszínét vörösre állítjuk. Maga a kijelölő a kapcsos zárójel nyitó eleme előtt található (h1).
{% code title="" %}
```css
h1 {
color: red;
}
```
{% endcode %}
A kijelölők hivatkozhatnak több elemre, vagy bizonyos típúsú elemekre (a fenti példában az összes `h1` elemre), de egészen specifikusan egy-egy elemet is kiválaszthatunk velük.
A kijelölők könnyebb megértését segíti a CSS Diner nevű játék, ami elérhető az alábbi linken:
## Általános kijelölő
Az **általános kijelölő** minden elemre általánosan hivatkozik, segítségével a HTML dokumentumban lévő *összes elemre* vonatkozó stílusokat tudunk megadni.
```css
* {
color: red;
}
```
Az általános kijelölőt csillag (\*) karakterrel hozhatunk létre.
{% hint style="warning" %}
Az általános kijelölő hatással van a HTML dokumentum fejlécére is, próbáljuk csak ki az alábbi stílust:
`* {` \
`display: block;` \
`}`
{% endhint %}
## Elem kijelölő
Az **elem kijelölő** ez elemeket **típusuk** alapján azonosítja, például lista elemre, vagy elemekre a kijelölő a következőképpen hivatkozhat:
```css
li {}
```
Az alábbi példában a bekezdésekre célzunk, ez azt jelenti, hogy az összes `p` elem a dokumentumban megkapja a vörös szövegszínt:
```markup
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
```
```css
p {
color: red;
}
```
Az elem összes példányát ki fogja választani az elem kijelölő az adott HTML dokumentumban.
A következő példában az összes cím (`h1`-`h6`) elemet kiválasztjuk vesszővel elválasztva (így minden cím a HTML dokumentumban vörös szövegszínű lesz):
```css
h1,
h2,
h3,
h4,
h5,
h6 {
color: red;
}
```
## Osztály kijelölő
Az **osztály kijelölő** az elemet az `class` (osztály) tulajdonsága alapján célozza be.
```markup
Lorem ipsum dolor sit amet
```
```css
.first-paragraph {
color: red;
}
```
Az osztály kijelölő ponttal kezdődik (.) ezt követi az osztály neve.
Ugyanazzal az osztállyal több elem is rendelkezhet, és egy elem rendelkezhet több osztállyal is. Így lehetőség van elemeinket rugalmasan csoportosítani.
```markup
...
```
## Azonosító kijelölő
Az **azonosító kijelölő** az elemet az **id** (egyedi azonosító) tulajdonsága alapján célozza be.
```markup
Lorem ipsum dolor sit amet
```
```css
#introduction {
color: red;
}
```
Az azonosító kijelölő rácsjellel (#) kezdődik, ezt követi az azonosító neve.
Egy HTML dokumentumban egy elem rendelkezhet egy adott egyedi azonosítóval, és ezt az elemet az azonosítókijelölővel tudjuk célozni.
{% hint style="warning" %}
Az osztály és az azonosító nevére vonatkoznak bizonyos megkötések, ezek a következők: Speciális karakter nem lehet a névben, a speciális karakterek közül kivételt képez a kötőjel (-), és az aláhúzás jel (\_), ezek megengedettek. Nem kezdődhetnek számmal, két kötőjellel, vagy egy kötőjellel, és egy számmal. Az alábbi osztálynevek és azonosítók **hibásak**:
* \&item
* 4item
* \--item
* -4item
{% endhint %}
## Leszármazott kijelölő
Ezzel a kijelölővel szülő elem alapján tudunk szűkíteni egy elemre (leszármazott). A szülőt és a gyermeket a kijelölőben szóközzel választjuk el. A következő példában csak a `section` elemben lévő bekezdés kap vörös szövegszínt, a második bekezdés, ami nincs benne a `section` elemben nem kapja meg:
```markup
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean et nunc nec ligula condimentum luctus et a urna.
```
```css
section p {
color: red;
}
```
A gyermeknek **nem kell közvetlenül** a szülőben lennie, lehet egy vagy több szinttel beljebb is, abben a példában mindkét bekezdésre hatással van a css (mindkettő leszármazottja a `section` elemnek):
```markup
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean et nunc nec ligula condimentum luctus et a urna.
```
```css
section p {
color: red;
}
```
Lehetőség van kettőnél több szint megadására, és a korábban megismert kijelölők szabadon kombinálhatóak:
```css
header .main-title h1 span {
color: red;
}
```
## Gyermek kijelölő
A **gyermek kijelölő** az alapján jelöli ki az adott HTML elemet, hogy közvetlenül melyik elemben található (szülő).
```markup
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
```css
.parent > .child {
color: red;
}
```
Gyermek kijelölőt a `>` jellel hozhatunk létre, a `>` jel bal oldalán a szülő, jobb oldalán a gyermek található. Ebben a példában *kizárólag* a közvetlenül a `p` HTML elemekben lévő `span` elemek szövegszínét festi vörösre a CSS stílus:
```css
p > span {
color: red;
}
```
## Szomszédos testvér kijelölő
Ezzel a kijelölővel egy bizonyos elem után következő elemet célozhatunk meg.
```markup
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Doloremque impedit laborum eum ad fugiat.
Error quam voluptatibus sequi dolore iure corrupti ab.
```
```css
p + p {
color: red;
}
```
A fenti esetben a második, és a harmadik bekezdésre fog vonatkozni a stílus (ezek a bekezdések találhatóak egy másik után, az első nem).
## Álosztályok
### Állapot álosztályok
Ezekkel a kijelölőkkel egy bizonyos állapotban lévő elemre hivatkozhatunk. Ilyen állapot például ha egy link fölött áll az egérkurzor, vagy ha egy beviteli mezőbe\
írunk éppen.
**:active** Aktív állapotban lévő elemre vonatkozik, egy link addig aktív, amíg lenyomva tartjuk az egér gombot.\
\&#xNAN;**:focus** Azokra az elemekre vonatkozik, amik fókuszban vannak (ráléptettünk tabbal, vagy benne állunk egy űrlap mezőben).\
\&#xNAN;**:hover** Az egérkurzor alatti elemekre vonatkozik.\
\&#xNAN;**:visited** Azokra a hivatkozásokra vonatkozik, amiket korábban már bejártunk.\
\&#xNAN;**:empty** Üres, és gyermek nélküli elemeket lehet kiválasztani vele.\
\&#xNAN;**:link** Eddig még nem bejárt linkeket lehet vele célozni.\
\&#xNAN;**:checked** Megjelölt input elemeket céloz.
```css
a:hover {
color: red;
}
```
A fenti példában a linkek vörös szövegszínt kapnak, ha föléjük kerül az egér kurzor.
## Pozíció álosztályok
Ezekkel a kijelölőkkel egy bizonyos pozícióban lévő elemre hivatkozhatunk. Ilyen pozíció, hogy egy elem páratlan, vagy páros elem egy sorozatban, esetleg az első vagy az utolsó darabja egy sorozatnak.
**:nth-child(n)** n-edik elem a sorban\
\&#xNAN;**:nth-type(n)** n-edik bizonyos elem\
\&#xNAN;**:first-child** első elem\
\&#xNAN;**:last-child** utolsó elem\
\&#xNAN;**:first-of-type** első egy bizonyos elem típusból\
\&#xNAN;**:last-of-type** utolsó egy bizonyos elem típusból
```markup
- Első elem
- Második elem
- Harmadik elem
- Negyedik elem
- Ötödik, vagy utolsó elem
```
```css
li:first-child {
color: red;
}
li:nth-child(3) {
color: green;
}
li:last-child {
color: blue;
}
```
Ebben a példában a lista elemek szövegszínét módosítjuk, az első elemét a `:first-child` (első gyermek) kijelölő segítségével vörösre, a harmadik lista elem színét a `:nth-child()` (n-edik elem) kijelölővel zöldre, és végül az utolsó lista elem színét kékre a `:last-child` (utolsó gyermek) kijelölővel.
## Álelemek
Minden HTML elemhez hozzá lehet rendelni két **álelemet**, ezek az eredeti elem gyermekei lesznek, egyet a tartalma előtt, egyet pedig a tartalma után tud megjeleníteni a böngésző. Az így létrejövő elemek *virtuális* elemek, a CSS stílus hozza létre őket, nem képezik a HTML dokumentum részét.
```css
p:before {
content: "";
}
p:after {
content: "";
}
```
Az **álelemek** CSS-ében el kell helyezni egy tartalom `content` meghatározást, ez adja meg az **álelem** tartalmát, e nélkül a böngésző nem hozza létre az álelemeket. Ez rendszerint szöveg vagy kép lehet, de üresen is lehet hagyni.
```css
p:before {
content: "Lorem ipsum dolor...";
}
div:before {
content: url('ribbon.png');
}
```
**Álelemet** az elem tartalma előtt a `:before` kijelölővel, a tartalom után az `:after` kijelölővel hozhatunk létre. Az **álelemek** alapesetben inline (szövegközi) elemek, és CSS stílusokkal módosítható a megjelenésük.
A következő példában egy főcím szövege előtt, és után elhelyezünk egy-egy kötőjelet, és a két kötőjelnek a szövegszínét is beállítjuk a `:before`, és az `:after` kijelölők segítségével:
```markup
Lorem Ipse
```
```css
h1:before,
h1:after {
content: " - ";
color: red;
}
```
## Kijelölők listája
| Kijelölő | Formátum | Cél |
| --------------------------- | ---------------- | ------------------------------------------------------------------------- |
| Általános kijelölő | `*` | Minden HTML elem |
| Elem kijelölő | `p` | Egy típusba tartozó összes elem |
| Osztály kijelölő. | `.container` | HTML elemek `class` tulajdonsága alapján |
| Azonosító kijelölő | #main-menu | HTML elem `id` tulajdonsága alapján |
| Leszármazott kijelölő | .parent .child | HTML elem a szülői alapján |
| Gyermek kijelölő | .parent > .child | HTML elem a közvetlen szülője alapján |
| Szomszédos testvér kijelölő | h1 + p | HTML elem az előző testvér elem alapján |
| Álosztály | a:hover | HTML elem egy bizonyos minősége,
állapota, sorrendje alapján
|