Mi az a CSS kijelölő, azaz szelektor? (CSS selector használata)

A CSS selector-okat (vagy kijelölőket) arra használjuk, hogy “kijelöljünk” velük egy elemet, amit formázni szeretnénk CSS segítségével..

Mi az a CSS kijelölő, azaz szelektor? (CSS selector használata)

A CSS selector-t nagyon sokféleképpen lehet nevezni. Angolul selectornak hívják, mi magyarok nyersfordításban szelektornak, vagy kijelölőnek hívjuk. De mire is valók ezek a CSS kijelölők? A CSS selector-okat arra használjuk, hogy “kijelöljünk” velük egy elemet, amit szerkeszteni szeretnénk.

Miket jelölhetünk ki?

  • HTML elemeket
  • id-kat, class-okat
  • összetett elemeket
  • álelemeket
  • álosztályokat
  • tulajdonságot

HTML elemek kijelölése

Bármelyik HTML elemeket kijelölhetjük, legyen szó akár egy p-ről, vagy div-ről.

Példa

CSS

p { color:red; }
Code language: CSS (css)

Eredmény

p elem

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

ID, class kijelölése

Az elemeinknek adhatunk egy azonosítót vagy egy osztálykijelölőt, amelyekre később hivatkozhatunk. Az id-ról itt, a class-ról itt tanulhatsz.

Példa

HTML+CSS

<!DOCTYPE html> <HTML> <HEAD> <STYLE> #id { color:red; } .class { background-color:yellow; } </STYLE> </HEAD> <BODY> <p id="id">ID</p> <p class="class">class</p> </BODY> </HTML>
Code language: HTML, XML (xml)

Eredmény

ID

class

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Összetett elemeket kijelölése

Egyszerre akár két elemre is hivatkozhatsz. Például egy div elemen belül lévő p elemre.

Példa

HTML+CSS

<!DOCTYPE html> <HTML> <HEAD> <STYLE> div p { color:red; } </STYLE> </HEAD> <BODY> <div><p>DIV-ben lévő p.</p></div> <p>Nem DIV-ben lévő p</p> </BODY> </HTML>
Code language: HTML, XML (xml)

Eredmény

DIV-ben lévő p.

Nem DIV-ben lévő p

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Álelemek kijelölése

CSS segítségével úgynevezett álelemeket is kijelölhetünk. Az álelemek olyan elemek, amelyeket konkrétan nekünk nem kell lekódolnunk, de attól függetlenül még beépítetten léteznek. Azaz például létrehozhatunk egy <h1>-et, majd hivatkozhatunk a h1 előtt lévő területre.

Példa

HTML+CSS

<!DOCTYPE html> <HTML> <HEAD> <STYLE> h1::before { content:"Ezt rakom elé: "; } </STYLE> </HEAD> <BODY> <h1>Ez egy címsor.</h1> </BODY> </HTML>
Code language: HTML, XML (xml)

Eredmény

Ezt rakom elé: Ez egy címsor.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Álosztályok kijelölése

Segítségével egy elem speciális állapotára vonatkozólag tehetünk meghatározásokat. Például beállíthatjuk, hogy egy elem másképp viselkedjen, ha fölé húzzuk az egeret.

Példa

HTML+CSS

<!DOCTYPE html> <HTML> <HEAD> <STYLE> p:hover { color:red; } </STYLE> </HEAD> <BODY> <p>Ha fölé viszed az egeret, akkor megváltozik a színe.</p> </BODY> </HTML>
Code language: HTML, XML (xml)

Eredmény

Ha fölé viszed az egeret, akkor megváltozik a színe.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Tulajdonság kijelölése

Egy adott elem egy adott tulajdonságára vonatkozólag is jelölhetünk ki. Például csak azokra a hivatkozásokra állítunk be különböző stílust, ahol a link másik oldalon nyílik meg.

Példa

HTML+CSS

<!DOCTYPE html> <HTML> <HEAD> <STYLE> a[target=_blank] { color:red; } </STYLE> </HEAD> <BODY> <a target="_blank">_blank</a><br> <a target="_self">_self</a> </BODY> </HTML>
Code language: HTML, XML (xml)

Eredmény

_blank
_self

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!