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 kód
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 kód
<!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 kód
<!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 kód
<!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 kód
<!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 kód
<!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)>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
