5.02 Jelölők - selectors

Default book

A stílusok megadásánál meghatározhatjuk, hogy a HTML TAG-ek mely körére legyen érvényes a stílus. Ezt kijelölésnek hívjuk (SELECTOR). Az alábbi lehetőségek a leggyakrabban használhatók.

  1. Az összes megadott bizonyos típusú tag-re (TYPE SELECTOR): tag_neve
  2. Egy osztály névvel ellátott tag-re (CLASS SELECTOR): .osztalynev
  3. Több osztály legyen érvényes egy TAG-re
  4. Egy egyedi azonosítóval (ID SELECTOR) ellátott TAG-re: #azonosito
  5. Felsorolom azokat a selectorokat amelyekre szeretném (GROUP OF SELECTORS): kijelolo1, kijelolo2, ....
  6. Az egér a TAG felett vagy az A tag további lehetőségei: hover, link, ...
Fontos!

1. Összes megadott bizonyos típusú tag-re

Ha azt szeretnénk, hogy az összes <p> tagre érvényes legyen egy síluselem, akkor az alábbi kódot kell használnunk:

p {
  color: #FFFF00;
  font-size: 16px;
}

A fenti példában minden paragrafus (bekezdés) módosított színnel és 16 pixel méretű betűkkel lesz megjelenítve, Ezt a fajta jelölést akkor használjuk, hogyha egy általában használt típushoz akaruk rendeni jellemzőket. Ilyen például a H1...H6 tag-ek, a P tag és ehhez hasonló általánosan használt tag-ek.

Ilyen módon tudjuk egy weboldal betűméretét is állítani:

body {
  font-size: 16px;
}

Ebben az esetben a teljes weboldal minden betűje 16px magas lesz.

Figyelem!

  • A jelölő maga a TAG elnevezése!

2. Egy osztály névvel ellátott tag jelölése:

 .elso_osztaly{
   height: 22px;
   width: 30px;
}
<p class="elso_osztaly">tartalom</p>

Minden TAG, amelynek a class parametere tartalmazza az "elso_osztaly" osztályt 22px magas lesz és a szlessége 30px,

3. Egy tag több osztály

A különböző osztályokhoz tartozó stílusdeklarációkat együttesen is lehet alkalmazni, hogyha a TAG class paraméterében felsoroljuk az osztályok neveit. Az alábbi stílusdeklarációban egyszer beállítottunk egy méretet, míg a másik deklarációban belső margót és lekerekített sarkú keretet állítottunk be.

 .meret{
   height: 22px;
   width: 30px;
}
.keretek{
   padding: 5px;
   border: solid red 1px;
   border-radius: 5px;
}

 Az HTML kódban lévő DIV-ek közül csak a harmadik lesz mind a két osztály szerint formázva.

<div class="meret">Első keret</div>
<div class="keretek">Második keret</div>
<div class="meret keretek">Harmadik keret</div>

Tehát, hogyha a class parameter osztályneveit szóközzel elválasztva felsoroljuk, akkor a külön-külön megadott stíluselemek egyszerre lesznek érvényesek a tag-re.

Akkor célszerű ilyet használni, ha a weboldalon van két féle formázás, amit sok helyen akarunk használni és egy helyen mind a két módot használni akarjuk. Célszerű persze a stílusdeklarációkban egymástól különböző tulajdonságokat beállítani, mert ha vannak közös tulajdonságok, akkor a sorban az utolsó felülírja a korábbit.

4. Egyedi azonosítóval (ID SELECTOR) ellátott TAG-re

Ha a weboldalon csak egy-egy TAg-et akarunk más formátummal ellátni, akkor célszerű használni azt, hogy a TAG-nek egyedi azonosítót, ID-t adunk és a stílusdefinÍciónál arra hivatkozunk.

<div id="Elso" class="meret">Első keret</div>
<div id="masodik" class="keretek">Második keret</div>
<div id="harmadik" class="meret keretek">Harmadik keret</div>

Ebben a példában az első keretben a tartalom kék lesz, a második keretben zöld, míg a harmadikban sárga...

 .meret{
   height: 22px;
   width: 30px;
}
.keretek{
   padding: 5px;
   border: solid red 1px;
   border-radius: 5px;
}

#elso{
  color: blue;
}
#masodik{
  color: green;
}

#color{
  color: yellow;
}

A fenti példában az első keretben a tartalom kék lesz, a második keretben zöld, míg a harmadikban sárga...

5. Felsorolom a selectorokat, amelyekre legyen érvényes a stílusdeklaráció

 .meret{
   height: 22px;
   width: 30px;
}
.keretek{
   padding: 5px;
   border: solid red 1px;
   border-radius: 5px;
}

#elso{
  color: blue;
}
#masodik{
  color: green;
}

#color{
  color: yellow;
}

#elso, #masodik, .meret {
  background-color: #556677;
}

Ebben a példában a korábbi dobozokból az elso és a masodik ID-jű doboz, továbbá a mérettel megjelölt osztály háttere lesz a megadott színű.

6. Az egér a TAG felett és az A tag lehetőségei

Egy oldalon való böngészés során gyakran érdekes lehet (főleg az A TAG esetén), hogy jelezzük az oldalon, hogy hol van az egér. Erre ad lehetőséget az eddigi jelölők kiegészítése a :hover kulcsszóval. Ez a lehetőség minden TAG-re csak a HTML5 és CSS3 óta van meg, korábban csak az A tag esetén lehetett használni.