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..

CSS alapok (A CSS alapjainak összefoglalója) című cikk nyitóképe

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)

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!