Kihagyás

5.2. fejezet

A z-index tulajdonság

A HTML elemek pozicionálásakor előfordulhat, hogy bizonyos elemek takarják egymást. Alapértelmezett módon az egymást takaró HTML objektumok közül mindig a kódban később szereplő elem kerül előtérbe.

Az elemek mélységi sorrendjét a z-index CSS tulajdonsággal szabályozhatjuk. Ennek értéke tetszőleges egész szám lehet (akár negatív szám is). Ekkor az egymást takaró elemek közül az kerül előtérbe, amelynek nagyobb a z-index értéke. Az azonos z-index értékkel rendelkező elemek esetén a kódban később szereplő elem fogja takarni a másikat.

Példa: A z-index tulajdonság használata

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
<head>
    <title>A z-index tulajdonság</title>
    <meta charset="UTF-8"/>
    <style>
        div { width: 150px; height: 150px; position: absolute; text-align: right; }
        .first { background: tomato; z-index: 1; top: 50px; left: 20px; }
        .second { background: lightgreen; z-index: 100; top: 120px; left: 80px; }
        .third { background: lightblue; z-index: -1; top: 80px; left: 130px; }
    </style>
</head>
<body>
<div class="first">z-index: 1</div>
<div class="second">z-index: 100</div>
<div class="third">z-index: -1</div>
</body>
</html>

Megjegyzés

A z-index tulajdonságot csak olyan elemek esetében lehet használni, amelyeknek a pozícionálása nem "static".

A kód kimenete

Pseudo-elemek

Ha egy HTML objektum egy specifikus részét szeretnénk formázni (pl. egy szöveg első betűjét vagy első sorát), akkor használjuk a CSS pseudo-elemeket. Ezeket a szelektor után, dupla kettősponttal adjuk meg: szelektor::pseudoelem.

A fontosabb pseudo-elemek:

  • ::before: generált tartalom közvetlenül az elem előtt
  • ::after: generált tartalom közvetlenül az elem után
  • ::selection: a kijelölt szövegrész
  • ::first-letter: a szöveg első karaktere
  • ::first-line: a szöveg első sora.

Példa: Pseudo-elemek használata

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="hu">
<head>
    <title>Pseudo-elemek</title>
    <meta charset="UTF-8"/>
    <style>
        /* Ha egérrel kijelöljük egy bekezdés szövegét, akkor a kijelölés háttérszíne világoszöld lesz */
        p::selection { background-color: lightgreen; }

        /* A bekezdések első betűje megnövelt betűméretű és piros színű lesz */
        p::first-letter { font-size: 120%; color: red; }

        /* Minden bekezdés után beszúrjuk a " (bekezdés vége)" szöveget */
        p::after { content: " (bekezdés vége)"; }
    </style>
</head>
<body>
<p>Első bekezdés</p>
<p>Második bekezdés</p>
<p>Harmadik bekezdés</p>
</body>
</html>

A kód kimenete

A CSS öröklődés

CSS-ben létezik öröklődés, ami azt jelenti, hogy egy objektum bizonyos CSS tulajdonságait örökölhetik az objektum gyerekei. Ennek köszönhetően bizonyos tulajdonságokat elegendő csak egyszer definiálnunk a szülő objektumra, és ekkor a gyerekek is automatikusan megöröklik ezeket.

Fontos megjegyezni viszont, hogy nem minden CSS tulajdonság örökölődik! Az alábbi táblázat összefoglalja a fontosabb öröklődő, illetve nem öröklődő tulajdonságokat.

Öröklődő CSS tulajdonságok Nem öröklődő CSS tulajdonságok
color, font-family, font-size, font-weight, list-style, text-align, text-indent, text-transform, visibility, white-space, word-space, letter-spacing, line-height, ... background, border, display, float, width, height, margin, outline, overflow, padding, position, text-decoration, vertical-align, z-index, ...

Amennyiben egy nem öröklődő CSS tulajdonságot mégis örököltetni szeretnénk, akkor ezt az inherit speciális értékkel tehetjük meg.

Példa: A font-family és color tulajdonságok automatikusan öröklődnek, viszont a border már nem. Ha a szegélyt is örököltetni szeretnénk, használjuk az inherit kulcsszót!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>CSS öröklődés</title>
      <meta charset="UTF-8"/>
      <style>
         #parent { font-family: Arial; color: blue; border: 3px solid black; }
         #child { border: inherit }    /* enélkül a szegély nem öröklődne! */
      </style>
   </head>
   <body>
      <div id="parent">
         Szülő objektum
         <div id="child">Gyerek objektum</div>
      </div>
   </body>
</html>

A kód kimenete

Note

Megfigyelhetjük a fenti táblázatban, hogy nagy általánosságban igaz, hogy a szöveggel kapcsolatos tulajdonságok öröklődnek. Ez alól persze vannak kivételek, de első megközelítésként ez egy jó irányelv lehet.

A CSS rangsor

Felmerülhet a kérdés, hogy ha egy objektumra több, egymásnak ellentmondó CSS formázást adunk ki (pl. egy bekezdés színét kékre, majd később pirosra szeretnénk állítani), akkor ezek közül vajon melyik stílus lesz érvényes.

Pontosan erre ad választ a CSS rangsor, amely különböző prioritásértékeket rendel az egyes formázásokhoz, és ezek alapján dönti el, hogy végül melyik formázás fog érvényesülni. A prioritások a következőképpen alakulnak (legerősebbtől a leggyengébbig):

  1. !important kulcsszóval megadott formázások
  2. inline CSS (a tagek style attribútumaként adjuk meg)
  3. id szelektorral megadott formázások
  4. class szelektorral vagy attribútum alapján történő kijelöléssel megadott formázások
  5. elem szelektorral megadott formázások.

Példa: Az alábbi kódban az első bekezdés piros (hiszen a #first id szelektor erősebb, mint a .blue class szelektor), a második kék (hiszen az inline CSS erősebb, mint az id szelektor), a harmadik pedig narancssárga betűszínű lesz (hiszen az !important kulcsszóval megadott formázás a legerősebb)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>CSS rangsor</title>
      <meta charset="UTF-8"/>
      <style>
         #first { color: red; }
         #second { color: green; }
         #third { color: orange !important; }
         .blue { color: blue; }
      </style>
   </head>
   <body>
      <p id="first" class="blue">Első bekezdés</p>
      <p id="second" style="color: blue;">Második bekezdés</p>
      <p id="third" style="color: purple;">Harmadik bekezdés</p>
   </body>
</html>

A kód kimenete

Megjegyzés

A felhasználó által !important kulcsszóval definiált formázások erősebbek, mint a webfejlesztők által ugyanezzel a kulcsszóval megadott stílusok. Ugyanakkor a felhasználó által definiált egyéb stílusok önmagukban nem erősebbek, mint a webfejlesztők által definiáltak.

Az összetett szelektoroknál - tehát azoknál a szelektoroknál, amelyek több részszelektorból épülnek fel - a részszelektorok prioritásai összeadódnak. Az így kapott összeg lesz a teljes szelektor prioritása.

Példa

Legyen az elem szelektor prioritása 1, a class szelektor prioritása 10, az id szelektoré pedig 100. Ekkor a #main .container div p összetett szelektor prioritása: 100+10+1+1 = 112.

Ha az eddigi szabályok alapján nem dőlt el a rangsor, akkor a kódban később szereplő formázás lesz az érvényes.

További CSS szelektorok

Korábban megismerkedtünk a legalapvetőbb CSS szelektorokkal (elem szelektor, class szelektor, id szelektor, univerzális szelektor). Ebben a részben néhány további kijelölőtípusról fogunk tanulni.

Megjegyzés

A gyakorlaton csak a gyakrabban használt szelektorokat tárgyaljuk. Ezeken kívül vannak még további CSS szelektorok is, amelyeknek a részletes listáját megtalálhatjuk itt.

Szelektorok csoportosítása

Amikor több szelektorra is ugyanazok a formázások vonatkoznak, akkor a szelektorokat vesszővel elválasztva soroljuk fel egymás után.

Példa: Az összes <h1> és <h2> objektum, valamint a class="warning" attribútummal rendelkező elemek piros betűszínűvé tétele

1
2
3
h1, h2, .warning {
   color: red;
}

Kijelölés kapcsolat alapján

CSS-ben használunk olyan szelektorokat is, amelyek egymáshoz való viszonyaik, kapcsolataik alapján jelölnek ki elemeket:

  • E1 E2: minden olyan E2 elemet kijelöl, amely egy E1-ben található
  • E1 > E2 minden olyan E2-t kijelöl, amelynek szülője E1 (szülő-gyerek kapcsolat alatt továbbra is közvetlen tartalmazást értünk)
  • E1 ~ E2: minden olyan E2-t kijelöl, amely E1-nek testvére és E1 után következik a kódban
  • E1 + E2: minden olyan E2-t kijelöl, amely E1-nek testvére és közvetlenül E1 után következik a kódban.

Példa: A body p szelektor kijelöli az összes olyan bekezdést, amely a <body>-ban található. A body > p azokat a bekezdéseket jelöli ki, amelyek közvetlenül a <body>-ba vannak beágyazva

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</title>
      <meta charset="UTF-8"/>
      <style>
         body p { background-color: lightblue; }   /* világoskék háttér */
         body > p { border: 3px solid darkred; }   /* sötétvörös szegély */
      </style>
   </head>
   <body>
      <p>Első bekezdés</p>
      <div>
         <p>Második bekezdés</p>
      </div>
      <p>Harmadik bekezdés</p>
   </body>
</html>

A kód kimenete

Példa: A p ~ p szelektor kijelöl minden olyan bekezdést, amely egy másik bekezdés testvére és valahol a másik bekezdés után található a kódban. A p + p szelektornál még azt is megköveteljük, hogy közvetlenül (azaz rögtön) a másik bekezdés után szerepeljen az elem

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</title>
      <meta charset="UTF-8"/>
      <style>
         p ~ p { background-color: lightblue; }   /* világoskék háttér */
         p + p { border: 3px solid darkred; }    /* sötétvörös szegély */
      </style>
   </head>
   <body>
      <p>Első bekezdés</p>
      <div>
         <p>Második bekezdés</p>
      </div>
      <p>Harmadik bekezdés</p>
      <p>Negyedik bekezdés</p>
   </body>
</html>

A kód kimenete

A kapcsolat alapján történő kijelölésre használhatunk még úgynevezett pseudo-class-okat is, a szelektor:pseudoclass szintaxissal. Ez a szintaxis a szelektor által kijelölt elemek közül kiválaszt minden olyant, amelyre pseudoclass teljesül.

Nézzünk néhány példát pseudo-class-okra, a teljesség igénye nélkül!

  • E1:first-child: minden olyan E1-et kijelöl, ami a szülőjének legelső gyereke
  • E1:nth-child(n): minden olyan E1-et kijelöl, ami a szülőjének n-edik gyereke
  • E1:last-child: minden olyan E1-et kijelöl, ami a szülőjének az utolsó gyereke
  • E1:first-of-type: minden olyan E1-et kijelöl, ami az azonos (E1) típusú testvérei közül a legelső
  • E1:nth-of-type(n): minden olyan E1-et kijelöl, ami az azonos (E1) típusú testvérei közül az n-edik
  • E1:last-of-type: minden olyan E1-et kijelöl, ami az azonos (E1) típusú testvérei közül az utolsó

Példa: Egy táblázat formázása pseudo-class-ok használatával

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</title>
      <meta charset="UTF-8"/>
      <style>
         tr:first-of-type {
            /* Minden olyan <tr>, ami a <tr> típusú testvérei közül a legelső (azaz a táblázat első sora) */
            background-color: black;
            color: white;
         }

         tr:nth-child(even) {
            /* Minden olyan <tr>, ami a szülőjének párosadik (2., 4., 6., ...) gyereke (azaz minden második sor) */
            background-color: #eee;
         }

         td:last-of-type {
            /* Minden olyan <td>, ami a <td> típusú testvérei közül az utolsó (azaz minden sor utolsó adatcellája) */
            color: darkred;
         }

         th, td { padding: 5px; }
      </style>
   </head>
   <body>
      <table>
         <tr>
            <th>Pizza neve</th>
            <th>Ár</th>
         </tr>
         <tr>
            <td>Sonkás-kukoricás</td>
            <td>1800 Ft</td>
         </tr>
         <tr>
            <td>Kolbászos</td>
            <td>1800 Ft</td>
         </tr>
         <tr>
            <td>Négysajtos</td>
            <td>2000 Ft</td>
         </tr>
         <tr>
            <td>Vegetáriánus</td>
            <td>2200 Ft</td>
         </tr>
      </table>
   </body>
</html>

Megjegyzés

Az nth-child, nth-of-type esetében meg lehet adni bonyolultabb kifejezéseket is (pl. nth-child(3n+1)), illetve rövidítéseket is (pl. nth-child(odd), nth-child(even)).

A kód kimenete

Kijelölés attribútum alapján

A HTML elemeket attribútumaik alapján is ki tudjuk jelölni CSS-ben. A két legalapvetőbb szelektortípus erre a célra:

  • E1[attr]: kijelöli az összes olyan E1-et, amely rendelkezik az attr attribútummal
  • E1[attr="val"]: kijelöli az összes olyan E1-et, amelynek attr attribútumának értéke val.

Példa: Az a[target] szelektor kijelöl minden olyan hivatkozást, amely rendelkezik a target attribútummal. Az a[target="_blank"] azokat a hivatkozásokat jelöli ki, amelyek target attribútumának értéke _blank.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</title>
      <meta charset="UTF-8"/>
      <style>
         a { margin-right: 10px; }
         a[target] { text-transform: uppercase; font-weight: bold; }  /* félkövér, nagybetűs */
         a[target="_blank"] { color: red; }                           /* piros betűszín */ 
      </style>
   </head>
   <body>
      <a href="https://youtu.be/NUYvbT6vTPs">Első link</a>
      <a href="https://youtu.be/yBLdQ1a4-JI" target="_blank">Második link</a>
      <a href="https://youtu.be/dQw4w9WgXcQ" target="_blank">Harmadik link</a>
      <a href="https://youtu.be/sAn7baRbhx4" target="_self">Negyedik link</a>
   </body>
</html>

A kód kimenete

Kijelölés állapot alapján

A CSS arra is biztosít lehetőséget, hogy állapotuk alapján jelöljünk ki HTML elemeket. Az ilyen kijelöléseket pseudo-class-ok segítségével fogjuk megvalósítani.

Az állapot alapján történő kijelölésre talán a legszemléletesebb példa a hivatkozások (linkek) állapotai. Egy hivatkozásnak összesen 4 állapota lehet, amelyekre a következőképpen hivatkozhatunk CSS-ben:

  • :link: még nem kerestük fel a hivatkozott célt
  • :visited: már felkerestük a hivatkozott célt
  • :hover: a kurzor a hivatkozás fölött áll
  • :active: a hivatkozás aktív (amikor rákattintunk).

Figyelem

Ahhoz, hogy a fenti szelektorok mindegyike hatásos legyen...

  • ...a :hover-nek a :link és :visited után kell szerepelnie
  • ...az :active-nak a :hover után kell szerepelnie a kódban.

Példa: Hivatkozások formázása állapot alapján (A kód működése kipróbálható itt)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>Hivatkozások formázása</title>
      <meta charset="UTF-8"/>
      <style>
         a:link { color: green; }
         a:visited { color: gray; }
         a:hover { color: orange; }
         a:active { color: red; }
      </style>
   </head>
   <body>
      <p>Ha még nem látogattuk meg korábban a hivatkozott weboldalt, akkor az alábbi hivatkozás zöld betűszínnel jelenik meg, egyébként pedig szürke színnel. Ha a hivatkozás fölé visszük a kurzort, akkor a szín narancssárgára vált, ha pedig a hivatkozásra kattintunk, akkor pirosra.</p>
      <p><a href="https://theuselessweb.com/">Ez egy hivatkozás</a></p>
   </body>
</html>

A fenti pseudo-class-ok közül a :hover és az :active nem csak hivatkozásokra, hanem minden HTML objektumra használható.

Utolsó frissítés: 2024-08-16 17:17:44