# 10. CSS alapok és szelektorok

2025. november 23. • 20 perc olvasás • CSS3 alapok

A CSS (Cascading Style Sheets) a weboldalak vizuális megjelenéséért felelős nyelv. Míg a HTML a tartalom struktúráját határozza meg, a CSS segítségével színeket, betűtípusokat, elrendezéseket és animációkat adhatunk az oldalunkhoz. Ebben a cikkben megismerkedhetsz a CSS alapjaival és a szelektorok használatával.

#### Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

A webes publikálás (HTML + CSS) csak emelt szinten követelmény. Ebből a leckéből érettségi anyag:

- CSS beágyazási módok (inline, belső, külső)
- Külső CSS fájl csatolása (`<link>`)
- Alap szelektorok (elem, osztály, azonosító)
- CSS szintaxis (szelektor, tulajdonság, érték)

Bónusz anyag (nem érettségi követelmény): pszeudo-osztályok részletesen, specificitás pontozás, kombinátorok.

## Mi a CSS és mire használjuk? EMELT SZINT

A CSS (Cascading Style Sheets, magyarul: lépcsőzetes stíluslapok) egy stílusleíró nyelv, amely a HTML elemek megjelenését szabályozza. A "cascading" (lépcsőzetes) szó arra utal, hogy a stílusok egymásra épülnek és felülírhatják egymást meghatározott szabályok szerint.

#### A CSS három fő feladata

- Megjelenés: Színek, betűtípusok, háttérképek beállítása
- Elrendezés: Elemek pozicionálása, Flexbox, Grid layoutok
- Interakció: Hover effektek, animációk, átmenetek

### HTML és CSS kapcsolata

A HTML és CSS szétválasztása a tartalom és megjelenés elkülönítésének elvét követi. Ez lehetővé teszi, hogy:

- Ugyanazt a HTML tartalmat különböző stílusokkal jelenítsük meg
- Egy CSS fájl több HTML oldalt is formázzon
- A weboldal karbantartása egyszerűbb legyen
- A fejlesztők és designerek külön dolgozhassanak

## CSS beágyazási módok EMELT SZINT

A CSS-t háromféle módon kapcsolhatjuk a HTML dokumentumhoz. Mindegyiknek megvan a maga helye és célja.

### 1. Inline CSS - Soron belüli stílus

Az inline CSS közvetlenül a HTML elem `style` attribútumában helyezkedik el. Ez a legkevésbé ajánlott módszer, mert nehezen karbantartható.

HTML - Inline CSS
`<!-- Inline CSS - közvetlenül az elemen --> <p style="color: red; font-size: 18px;">Piros szöveg</p> <h1 style="background-color: yellow; padding: 10px;"> Sárga háttér </h1> <button style="background: #4CAF50; color: white; border: none; padding: 10px 20px;"> Stílusos gomb </button>`

#### Mikor használd az inline CSS-t?

- ✅ Gyors teszteléshez: Ideiglenesen kipróbálni egy stílust
- ✅ Email template-ekben: Sok email kliens csak inline CSS-t támogat
- ✅ JavaScript dinamikus stílusokhoz: Futásidőben változó értékek
- ❌ Ne használd: Általános stílusozáshoz, mert nem újrafelhasználható

#### Érettségi vizsga - Fontos!

Az érettségi vizsgán SOHA ne használj inline CSS-t! A vizsgafeladatokban minden stílust a külső CSS fájlban (stíluslapon) kell elhelyezni. Az inline stílusok használata pontvesztéssel járhat, mivel a feladat általában külön kéri a HTML és CSS szétválasztását. Mindig a `<link rel="stylesheet" href="style.css">` módszert alkalmazd!

### 2. Internal CSS - Belső stíluslap

Az internal CSS a HTML dokumentum `<head>` részében, a `<style>` tagen belül helyezkedik el. Egyetlen oldalra vonatkozó stílusokhoz hasznos.

HTML - Internal CSS
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Internal CSS példa</title> <!-- Internal CSS a style tagben --> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; } h1 { color: #333; text-align: center; } p { line-height: 1.6; color: #666; } .kiemelt { background-color: yellow; padding: 5px; } </style> </head> <body> <h1>Címsor</h1> <p>Bekezdés szövege.</p> <p class="kiemelt">Kiemelt bekezdés.</p> </body> </html>`

#### Érettségi vizsga - Fontos!

Az érettségi vizsgán az internal CSS-t se használd! Bár a belső stíluslap technikailag helyes megoldás, a vizsgafeladatok szinte mindig külső CSS fájl használatát kérik. A stílusokat mindig különálló `.css` fájlban helyezd el, és a `<link>` taggel linkeld be!

### 3. External CSS - Külső stíluslap (ajánlott)

Az external CSS egy külön `.css` fájlban található, amelyet a HTML `<link>` taggel kapcsolunk be. Ez a legjobb gyakorlat valós projektekben.

HTML - External CSS belinkelése
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>External CSS példa</title> <!-- External CSS belinkelése --> <link rel="stylesheet" href="style.css"> <!-- Több CSS fájl is belinkelhető --> <link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/components.css"> </head> <body> <h1>Az oldal címe</h1> <p>A stílusok a külső CSS fájlból jönnek.</p> </body> </html>`
style.css - Külső CSS fájl tartalma
`/* style.css - Külső stíluslap */ /* Alap beállítások */ body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } /* Címsor stílus */ h1 { color: #333; text-align: center; margin-top: 20px; } /* Bekezdés stílus */ p { line-height: 1.6; color: #666; padding: 0 20px; }`

#### Miért a külső CSS a legjobb?

- Újrafelhasználható: Egy CSS fájl több HTML oldalt is formázhat
- Cache-elhető: A böngésző eltárolja, gyorsabb betöltés
- Karbantartható: Egy helyen módosítható az összes oldal stílusa
- Tiszta kód: HTML és CSS elkülönül, átláthatóbb

### Beágyazási módok összehasonlítása

Módszer | Előny | Hátrány | Használat
--- | --- | --- | ---
Inline | Gyors, specifikus | Nem újrafelhasználható | Tesztelés, email
Internal | Egy fájlban minden | Nem cache-elhető | Egyoldalas projektek
External | Újrafelhasználható, cache | Extra HTTP kérés | Valós projektek (ajánlott)

## CSS szintaxis EMELT SZINT

A CSS szabályok (rules) három fő részből állnak: szelektor, tulajdonság és érték.

CSS - Alapszintaxis
`/* CSS szabály felépítése */ szelektor { tulajdonság: érték; tulajdonság2: érték2; } /* Konkrét példa */ h1 { color: blue; /* szín */ font-size: 24px; /* betűméret */ text-align: center; /* igazítás */ } /* Több szelektor ugyanazzal a stílussal */ h1, h2, h3 { font-family: Arial, sans-serif; color: #333; } /* Megjegyzések CSS-ben */ /* Ez egy egysoros megjegyzés */ /* Ez egy többsoros megjegyzés */`

#### CSS szintaxis szabályok

- Kapcsos zárójel: A tulajdonságok `{ }` között vannak
- Kettőspont: Tulajdonság és érték között `:`
- Pontosvessző: Minden deklaráció végén `;` (az utolsónál opcionális, de ajánlott)
- Kis-nagybetű: A CSS nem case-sensitive, de a konvenció a kisbetű

## Alap szelektorok EMELT SZINT

A szelektorok határozzák meg, hogy mely HTML elemekre vonatkozzon a stílus. Íme a legfontosabb szelektortípusok:

### 1. Elem (típus) szelektor

Az elem szelektor az összes azonos típusú HTML elemet kiválasztja.

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Elem szelektor példa</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Főcímsor</h1> <p>Ez az első bekezdés.</p> <p>Ez a második bekezdés.</p> <a href="#">Ez egy link</a> </body> </html>`
style.css - Külső stíluslap
`/* Minden bekezdés kék színű lesz */ p { color: blue; } /* Minden h1 címsor */ h1 { font-size: 32px; margin-bottom: 20px; } /* Minden link */ a { color: #007bff; text-decoration: none; }`

#### Élő példa - Elem szelektor:

# Főcímsor

Ez az első bekezdés.

Ez a második bekezdés.

Ez egy link

Figyeld meg: minden <p> elem kék színű lett, mert a CSS-ben a `p` szelektort használtuk.

### 2. Osztály (class) szelektor

Az osztály szelektor a `.` (pont) karakterrel kezdődik, és az adott class attribútummal rendelkező elemeket választja ki. Egy osztály több elemen is használható.

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Osztály szelektor példa</title> <link rel="stylesheet" href="style.css"> </head> <body> <p class="kiemelt">Ez egy kiemelt bekezdés.</p> <p>Ez egy normál bekezdés.</p> <p class="kiemelt">Ez is kiemelt.</p> <div class="kartya">Termékkártya 1</div> <div class="kartya">Termékkártya 2</div> <!-- Több osztály egy elemen --> <button class="gomb gomb-primary nagy">Kattints!</button> </body> </html>`
style.css - Külső stíluslap
`/* Osztály szelektor ponttal kezdődik */ .kiemelt { background-color: yellow; padding: 10px; border-left: 4px solid orange; } .kartya { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 0; } /* Több osztály kombinálása */ .gomb { padding: 10px 20px; border: none; cursor: pointer; border-radius: 4px; } .gomb-primary { background-color: #007bff; color: white; } .nagy { font-size: 18px; padding: 15px 30px; }`

#### Élő példa - Osztály szelektor:

Ez egy kiemelt bekezdés. (class="kiemelt")

Ez egy normál bekezdés. (nincs class)

Ez is kiemelt. (class="kiemelt")

Termékkártya 1 (class="kartya")
Termékkártya 2 (class="kartya")

Figyeld meg: a .kiemelt osztály két bekezdésre is vonatkozik, a gomb pedig három osztályt kombinál.

### 3. Azonosító (ID) szelektor

Az ID szelektor a `#` (kettőskereszt) karakterrel kezdődik. Egy ID csak egyszer használható egy oldalon!

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>ID szelektor példa</title> <link rel="stylesheet" href="style.css"> </head> <body> <header id="fejlec"> <h1>Oldal fejléc</h1> </header> <main id="fo-tartalom"> <p>Fő tartalom itt található...</p> </main> <footer id="lablec"> <p>Lábléc szövege</p> </footer> </body> </html>`
style.css - Külső stíluslap
`/* ID szelektor kettőskereszttel (#) kezdődik */ #fejlec { background-color: #333; color: white; padding: 20px; } #fo-tartalom { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; } #lablec { background-color: #222; color: #999; text-align: center; padding: 15px; }`

#### Élő példa - ID szelektor:

# Oldal fejléc (id="fejlec")

Fő tartalom itt található... (id="fo-tartalom")

Figyeld meg: minden ID egyedi - #fejlec, #fo-tartalom és #lablec csak egyszer szerepelhet az oldalon.

#### Osztály vs ID - Melyiket használd?

- Osztály (.class): Többször használható, alacsonyabb specificitás → Ajánlott stílusozáshoz
- ID (#id): Egyedi, magas specificitás → JavaScript célpontnak, anchor linkekhez
- Tipp: A modern CSS-ben inkább osztályokat használunk, az ID-t kerüljük stílusozásra

### 4. Univerzális szelektor

A `*` (csillag) szelektor az összes elemet kiválasztja. Óvatosan használd, mert minden elemre hatással van.

CSS - Univerzális szelektor
`/* Minden elem kiválasztása */ * { margin: 0; padding: 0; box-sizing: border-box; /* Gyakori reset */ } /* Egy elemen belül minden gyerek */ .container * { font-family: Arial, sans-serif; }`

### Alap szelektorok összefoglalása

Szelektor | Szintaxis | Mit választ ki? | Példa
--- | --- | --- | ---
Elem | `elem` | Összes ilyen típusú elem | `p { }`
Osztály | `.osztaly` | Elemek ezzel az osztállyal | `.kartya { }`
ID | `#azonosito` | Egyetlen elem ezzel az ID-val | `#header { }`
Univerzális | `*` | Minden elem | `* { }`

## Kombinált szelektorok VEGYES

A kombinált szelektorok több szelektort kapcsolnak össze, hogy pontosabban célozzunk meg elemeket.

### 1. Leszármazott szelektor (szóköz) EMELT SZINT

A szóközzel elválasztott szelektorok bármely mélységű leszármazottat kiválasztják.

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Leszármazott szelektor</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="doboz"> <p>Közvetlen gyerek bekezdés</p> <div> <p>Beágyazott bekezdés (unoka)</p> <div> <p>Mélyebben beágyazott (dédunoka)</p> </div> </div> </div> <p>Kívüli bekezdés (nem leszármazott)</p> </body> </html>`
style.css - Külső stíluslap
`/* Leszármazott szelektor: szóközzel */ /* A .doboz-on belül MINDEN p elem (bármely mélységben) */ .doboz p { background-color: #e3f2fd; padding: 10px; margin: 5px 0; border-left: 4px solid #2196f3; }`

#### Élő példa - Leszármazott szelektor (.doboz p):

<div class="doboz">

Közvetlen gyerek bekezdés ✓

<div>

Beágyazott bekezdés (unoka) ✓

<div>

Mélyebben beágyazott (dédunoka) ✓

Kívüli bekezdés (nem leszármazott) ✗

A `.doboz p` minden bekezdést kiválaszt a .doboz-on belül, bármilyen mélyen legyen is.

### 2. Gyerek szelektor (>) BÓNUSZ

A `>` jel csak a közvetlen gyerekeket választja ki, a mélyebb leszármazottakat nem.

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Gyerek szelektor</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="doboz"> <p>Közvetlen gyerek bekezdés</p> <div> <p>Beágyazott bekezdés (unoka)</p> </div> <p>Másik közvetlen gyerek</p> </div> </body> </html>`
style.css - Külső stíluslap
`/* Gyerek szelektor: > jellel */ /* CSAK a .doboz közvetlen gyerek p elemei */ .doboz > p { background-color: #e8f5e9; padding: 10px; margin: 5px 0; border-left: 4px solid #4caf50; }`

#### Élő példa - Gyerek szelektor (.doboz > p):

<div class="doboz">

Közvetlen gyerek bekezdés ✓

<div>

Beágyazott bekezdés (unoka) ✗

Másik közvetlen gyerek ✓

A `.doboz > p` csak a közvetlen gyerekeket választja ki, az unokákat nem!

### 3. Szomszédos testvér szelektor (+) BÓNUSZ

A `+` jel a közvetlenül utána következő testvér elemet választja ki.

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Szomszédos testvér szelektor</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>Cím</h2> <p>Első bekezdés (közvetlenül a h2 után)</p> <p>Második bekezdés</p> <p>Harmadik bekezdés</p> </body> </html>`
style.css - Külső stíluslap
`/* Szomszédos testvér szelektor: + jellel */ /* CSAK a h2 után KÖZVETLENÜL következő p elem */ h2 + p { background-color: #fff3e0; padding: 10px; border-left: 4px solid #ff9800; font-size: 1.1em; }`

#### Élő példa - Szomszédos testvér szelektor (h2 + p):

## Cím

Első bekezdés (közvetlenül a h2 után) ✓

Második bekezdés ✗

Harmadik bekezdés ✗

A `h2 + p` csak az első, közvetlenül utána következő testvér bekezdést választja ki.

### 4. Általános testvér szelektor (~) BÓNUSZ

A `~` jel az összes utána következő testvért kiválasztja (nem csak a közvetlent).

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Általános testvér szelektor</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>Bekezdés a h2 előtt</p> <h2>Cím</h2> <p>Első bekezdés</p> <p>Második bekezdés</p> <div>Egy div elem</div> <p>Harmadik bekezdés</p> </body> </html>`
style.css - Külső stíluslap
`/* Általános testvér szelektor: ~ jellel */ /* MINDEN p elem, ami a h2 UTÁN következik testvérként */ h2 ~ p { background-color: #f3e5f5; padding: 10px; margin: 5px 0; border-left: 4px solid #9c27b0; }`

#### Élő példa - Általános testvér szelektor (h2 ~ p):

Bekezdés a h2 előtt ✗

## Cím

Első bekezdés ✓

Második bekezdés ✓

Egy div elem (nem p, nem választódik ki)

Harmadik bekezdés ✓

A `h2 ~ p` az összes testvér bekezdést kiválasztja, ami a h2 után jön - akkor is, ha van közöttük más elem (pl. div).

### Kombinált szelektorok összefoglalása

Szelektor | Szintaxis | Mit választ ki?
--- | --- | ---
Leszármazott | `A B` | Minden B, ami A-n belül van (bármely mélységben)
Gyerek | `A > B` | Csak közvetlen gyerek B elemek
Szomszéd testvér | `A + B` | A közvetlenül utáni B testvér
Általános testvér | `A ~ B` | Minden B testvér, ami A után jön

## Pszeudo-osztályok BÓNUSZ

A pszeudo-osztályok az elemek különleges állapotait vagy pozícióját célozzák meg. Kettősponttal (`:`) kezdődnek.

### Interakciós pszeudo-osztályok

Az interakciós pszeudo-osztályok a felhasználói műveletek alapján változtatják az elemek megjelenését.

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Interakciós pszeudo-osztályok</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#">Ez egy link</a> <button class="gomb">Kattints rám!</button> <input type="text" placeholder="Kattints ide..."> </body> </html>`
style.css - Külső stíluslap
`/* :hover - Egér rámutat az elemre */ .gomb:hover { background-color: #45a049; transform: translateY(-2px); } /* :active - Elem aktív (kattintás pillanata) */ .gomb:active { background-color: #1b5e20; transform: scale(0.95); } /* :focus - Elem fókuszban van (Tab vagy kattintás) */ input:focus { outline: none; border-color: #007bff; background-color: #f0f7ff; box-shadow: 0 0 0 4px rgba(0,123,255,0.4); }`

#### Élő példa - Interakciós pszeudo-osztályok:

Próbáld ki: Húzd fölé az egeret, kattints, vagy használd a Tab billentyűt!

:hover link

A `:hover` egér rámutatáskor, a `:focus` fókuszáláskor, az `:active` kattintáskor aktiválódik.

### Pozíció alapú pszeudo-osztályok

A pozíció pszeudo-osztályok az elemek sorrendje alapján választanak ki elemeket.

#### :first-child, :last-child és :nth-child(n)

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Pozíció pszeudo-osztályok</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="lista"> <li>Első elem</li> <li>Második elem</li> <li>Harmadik elem</li> <li>Negyedik elem</li> <li>Ötödik elem</li> </ul> </body> </html>`
style.css - Külső stíluslap
`/* :first-child - Első gyerek */ .lista li:first-child { background-color: #e3f2fd; font-weight: bold; } /* :last-child - Utolsó gyerek */ .lista li:last-child { background-color: #fce4ec; font-weight: bold; } /* :nth-child(n) - N-edik gyerek */ .lista li:nth-child(3) { background-color: #ff9800; color: white; }`

#### Élő példa - :first-child, :last-child, :nth-child(3):

- Első elem (:first-child) - kék háttér ✓
- Második elem
- Harmadik elem (:nth-child(3)) - narancs háttér ✓
- Negyedik elem
- Ötödik elem (:last-child) - rózsaszín háttér ✓

A :first-child és :last-child az első/utolsó elemet célozza, a :nth-child(3) pedig pontosan a 3. elemet.

#### :nth-child(odd) és :nth-child(even) - Zebra minta

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Zebra minta</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="lista"> <li>Első elem</li> <li>Második elem</li> <li>Harmadik elem</li> <li>Negyedik elem</li> <li>Ötödik elem</li> </ul> </body> </html>`
style.css - Külső stíluslap
`/* :nth-child(odd) - Páratlan elemek (1, 3, 5...) */ .lista li:nth-child(odd) { background-color: #f5f5f5; border-left: 4px solid #2196f3; } /* :nth-child(even) - Páros elemek (2, 4, 6...) */ .lista li:nth-child(even) { background-color: #fff; border-left: 4px solid #4caf50; }`

#### Élő példa - Zebra minta:

- 1. Páratlan (:nth-child(odd)) - kék csík ✓
- 2. Páros (:nth-child(even)) - zöld csík ✓
- 3. Páratlan (:nth-child(odd)) - kék csík ✓
- 4. Páros (:nth-child(even)) - zöld csík ✓
- 5. Páratlan (:nth-child(odd)) - kék csík ✓

A zebra minta táblázatoknál és listáknál javítja az olvashatóságot.

#### nth-child() képletek

- `:nth-child(3)` - Pontosan a 3. elem
- `:nth-child(odd)` - Páratlan elemek (1, 3, 5...)
- `:nth-child(even)` - Páros elemek (2, 4, 6...)
- `:nth-child(3n)` - Minden 3. elem (3, 6, 9...)
- `:nth-child(3n+1)` - Minden 3.-tól 1-gyel eltolva (1, 4, 7...)
- `:nth-child(-n+3)` - Első 3 elem

### Űrlap pszeudo-osztályok

Az űrlap pszeudo-osztályok a beviteli mezők állapotát célozzák meg.

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Űrlap pszeudo-osztályok</title> <link rel="stylesheet" href="style.css"> </head> <body> <form> <input type="text" placeholder="Opcionális mező"> <input type="email" placeholder="Email (kötelező)" required> <input type="text" value="Letiltott mező" disabled> <input type="checkbox" id="cb1"> <label for="cb1">Jelölj be!</label> </form> </body> </html>`
style.css - Külső stíluslap
`/* :required - Kötelező mező */ input:required { border-left: 4px solid #ff5500; } /* :optional - Opcionális mező */ input:optional { border-left: 4px solid #ccc; } /* :disabled - Letiltott mező */ input:disabled { background: #e0e0e0; cursor: not-allowed; } /* :valid - Érvényes érték */ input:valid { border-color: #28a745; } /* :invalid - Érvénytelen érték */ input:invalid { border-color: #dc3545; } /* :checked - Bejelölt checkbox */ input[type="checkbox"]:checked + label { color: #007bff; font-weight: bold; }`

#### Élő példa - Űrlap pszeudo-osztályok:

:optional
:required
:disabled
Jelölj be! (:checked + label)

Próbáld ki: írj be egy érvényes email címet (pl. pelda@email.hu) a :valid/:invalid állapotok megtekintéséhez!

## Kaszkád és specificitás BÓNUSZ

A "Cascading" (lépcsőzetes) a CSS nevében arra utal, hogy a stílusok egymásra épülnek. Ha több szabály vonatkozik ugyanarra az elemre, a böngésző a specificitás és a sorrend alapján dönti el, melyik érvényesül.

### Specificitás számítása - Pontrendszer

A specificitás megmutatja, mennyire "erős" egy CSS szabály. Képzeld el úgy, mint egy pontversenyt: amelyik szelektor több pontot ér, az nyer!

#### A pontrendszer egyszerűen

Számold össze, hány darab van a szelektorodban az alábbi típusokból:

Inline stílus | 1000 pont
#ID szelektor | 100 pont
.osztály, :pszeudo-osztály | 10 pont
elem (p, div, h1...) | 1 pont

A magasabb pontszám nyer! Ha két szabály ugyanarra az elemre vonatkozik, a több pontot érő érvényesül.

#### Példák a pontszámításra

Szelektor | Számítás | Összesen
--- | --- | ---
`p` | 1 elem = 1 pont | 1 pont
`.kiemelt` | 1 osztály = 10 pont | 10 pont
`p.kiemelt` | 1 elem + 1 osztály = 1 + 10 | 11 pont
`#fejlec` | 1 ID = 100 pont | 100 pont
`#fejlec .menu a` | 1 ID + 1 osztály + 1 elem = 100 + 10 + 1 | 111 pont
`div p.kiemelt:hover` | 2 elem + 1 osztály + 1 pszeudo = 2 + 10 + 10 | 22 pont
`style="..."` | inline stílus = 1000 pont | 1000 pont

#### Élő példa - Melyik szín nyer?

Ha mindhárom szabály ugyanarra a bekezdésre vonatkozik:

p { color: green; } /* 1 pont */
.szoveg { color: blue; } /* 10 pont */
#bekezdes { color: red; } /* 100 pont */

Eredmény:

PIROS NYER! (100 pont > 10 pont > 1 pont)

#### Fontos szabályok

- * (univerzális) szelektor = 0 pont (a leggyengébb)
- !important = mindent felülír (de KERÜLD! Az érettségi vizsgán NEM használható, és nehezen módosítható kódot eredményez!)
- Ha azonos a pontszám → a később írt szabály nyer (kaszkád elv)

### Kaszkád sorrend

CSS - Kaszkád példa
`/* Ha azonos specificitás, a sorrend dönt */ p { color: red; } /* Ez definiálódik először */ p { color: blue; } /* Ez később, tehát EZ érvényesül */ /* A sorrend a fájlok belinkelésénél is számít */ /* style.css: p { color: red; } */ /* theme.css: p { color: blue; } - Ez érvényesül, ha később van belinkelve */ <!-- HTML --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="theme.css"> <!-- Ez nyer azonos specificitásnál -->`

## Gyakorlati példa: Navigáció stílusozása EMELT SZINT

Nézzük meg, hogyan alkalmazzuk az eddig tanultakat egy valós navigációs menü stílusozásához:

index.html - HTML fájl
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Navigáció példa</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="fonavigacio"> <ul> <li><a href="index.html" class="aktiv">Főoldal</a></li> <li><a href="termekek.html">Termékek</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="kapcsolat.html">Kapcsolat</a></li> </ul> </nav> </body> </html>`
style.css - Külső stíluslap
`/* Navigáció alap stílus */ .fonavigacio { background-color: #e9ecef; padding: 0 20px; border-radius: 4px; } /* Lista stílus reset */ .fonavigacio ul { list-style: none; margin: 0; padding: 0; display: flex; } /* Linkek alap stílusa */ .fonavigacio a { display: block; color: #333; text-decoration: none; padding: 15px 20px; transition: all 0.3s ease; } /* Hover effekt */ .fonavigacio a:hover { background-color: #dee2e6; color: #000; } /* Aktív oldal kiemelése */ .fonavigacio a.aktiv { background-color: #007bff; color: white; } /* Linkekhez keret */ .fonavigacio a { border: 2px solid #007bff; border-left: none; } /* Első elem: bal keret + lekerekítés */ .fonavigacio li:first-child a { border-left: 2px solid #007bff; border-radius: 20px 0 0 20px; } /* Utolsó elem: jobb oldali lekerekítés */ .fonavigacio li:last-child a { border-radius: 0 20px 20px 0; }`

#### Élő példa - Navigáció:

Próbáld ki: Vidd az egeret a menüpontok fölé!

A navigáció használja: .fonavigacio (osztály szelektor), a:hover (hover pszeudo-osztály), .aktiv (osztály az aktuális oldalhoz), li:first-child és li:last-child (pozíció pszeudo-osztályok - ezekkel kerekítjük le az első elem bal és az utolsó elem jobb sarkait).

## Összefoglalás

Ebben a cikkben megismerkedtél a CSS alapjaival:

- CSS szerepe: Weboldalak vizuális megjelenésének szabályozása
- Beágyazási módok: Inline, Internal, External (külső CSS ajánlott)
- Alap szelektorok: elem, .osztály, #id, * (univerzális)
- Kombinált szelektorok: leszármazott, gyerek (>), testvér (+, ~)
- Pszeudo-osztályok: :hover, :focus, :first-child, :nth-child()
- Specificitás: inline > ID > osztály > elem

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a CSS szelektorokat a gyakorlatban:

- Főoldal - Navigáció :hover effektjei
- Processzor oldal - Termékkártyák .class szelektorokkal
- Blog oldal - Cikklista :nth-child() zebra mintával

#### Következő lépések

Gyakorold a szelektorokat: nyisd meg a böngésző DevTools-át (F12), és kísérletezz különböző szelektorokkal. Próbáld ki a :hover és :nth-child() pszeudo-osztályokat!

Következő cikk: Színek és háttér - Ismerd meg a színformátumokat (HEX, RGB, HSL), a háttérképek beállítását és a gradiens háttereket!