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 egyh1 címet:

<h1>Helló világ</h1>

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).

h1 {
    color: red;
}

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: https://flukeout.github.io/

Á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.

* {
    color: red;
}

Az általános kijelölőt csillag (*) karakterrel hozhatunk létre.

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; }

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:

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:

<p>Lorem ipsum dolor sit amet.</p>
<p>Consectetur adipiscing elit.</p>

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):

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.

<p class="first-paragraph">Lorem ipsum dolor sit amet</p>

.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.

<div class="osztaly-1 osztaly-2 osztaly-3">...</div>

Azonosító kijelölő

Az azonosító kijelölő az elemet az id (egyedi azonosító) tulajdonsága alapján célozza be.

<p id="introduction">Lorem ipsum dolor sit amet</p>

#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.

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

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:

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<p>Aenean et nunc nec ligula condimentum luctus et a urna.</p>

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):

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div>
        <p>Aenean et nunc nec ligula condimentum luctus et a urna.</p>
    </div>
</section>

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:

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ő).

<div class="parent">
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

.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:

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.

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p>Doloremque impedit laborum eum ad fugiat.</p>
<p>Error quam voluptatibus sequi dolore iure corrupti ab.</p>

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. :focus Azokra az elemekre vonatkozik, amik fókuszban vannak (ráléptettünk tabbal, vagy benne állunk egy űrlap mezőben). :hover Az egérkurzor alatti elemekre vonatkozik. :visited Azokra a hivatkozásokra vonatkozik, amiket korábban már bejártunk. :empty Üres, és gyermek nélküli elemeket lehet kiválasztani vele. :link Eddig még nem bejárt linkeket lehet vele célozni. :checked Megjelölt input elemeket céloz.

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 :nth-type(n) n-edik bizonyos elem :first-child első elem :last-child utolsó elem :first-of-type első egy bizonyos elem típusból :last-of-type utolsó egy bizonyos elem típusból

<ul>
    <li>Első elem</li>
    <li>Második elem</li>
    <li>Harmadik elem</li>
    <li>Negyedik elem</li>
    <li>Ötödik, vagy utolsó elem</li>
</ul>

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.

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.

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:

<h1>Lorem Ipse</h1>

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