CSS-választók

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A CSS-választó kiválasztja a HTML-elem(eke)t stílusozni akar.

CSS-választók

A CSS-szelektorok a HTML-elemek „megkeresésére” (vagy kiválasztására) szolgálnak stílusozni akar.

A CSS-szelektorokat öt kategóriába sorolhatjuk:

  • Egyszerű választó (elemek kiválasztása név, azonosító, osztály alapján)

  • Kombinátor szelektorok (vál a köztük lévő konkrét kapcsolaton alapuló elemek)

  • Pszeudoosztály szelektorok (elemek kiválasztása egy bizonyos állapot alapján)

  • Pszeudoelem-választók (select és stílus egy elem egy részét)

  • Attribútumválasztók (elemek kiválasztása a következő alapján: attribútum vagy attribútumérték)

Ez az oldal a legalapvetőbb CSS-választókat ismerteti.

A CSS elemválasztó

Az elemválasztó az elem neve alapján választja ki a HTML elemeket.

Példa

Itt lesz az oldal összes <p> eleme középre igazítva, piros szövegszínnel:

p
{
  text-align: center;
  color: red;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

A CSS azonosító választó

Az azonosító választó egy HTML-elem id attribútuma alapján választ ki egy adott elemet.

Egy elem azonosítója egyedi az oldalon belül, így az azonosító választó is az szokott válassz egy egyedi elemet!

Egy adott azonosítóval rendelkező elem kiválasztásához írjon be egy hash (#) karaktert, amelyet követ az elem azonosítója.

Példa

Az alábbi CSS-szabályt alkalmazzuk az id="para1" HTML-elemre:

#para1
{
  text-align: center;
  color: red;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

Megjegyzés: Az azonosító neve nem kezdődhet számmal!

A CSS osztályválasztó

Az osztályválasztó kiválasztja a HTML elemeket egy adott osztályattribútummal.

Egy adott osztályhoz tartozó elemek kiválasztásához írjon be egy pontot (.), majd a osztály név.

Példa

Ebben a példában az összes class="center" karakterláncú HTML-elem piros és középre igazított lesz:

.center {
  text-align: center;
  color: red;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

Azt is megadhatja, hogy egy osztály csak meghatározott HTML-elemekre legyen hatással.

Példa

Ebben a példában csak a <p> class="center" elem lesz piros és középre igazítva:

p.center {
  text-align: center;
  color: red;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

HTML elemek egynél több osztályra is vonatkozhat.

Példa

Ebben a példában a <p> elem stílusa a class="center" szerint lesz és a class="large"-hez:

<p class="center large">This paragraph refers to two classes.</p>

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> 

</body>
</html>

Megjegyzés: Az osztály neve nem kezdődhet számmal!

A CSS univerzális választó

Az univerzális választó (*) az összes HTML-t kiválasztja elemek az oldalon.

Példa

Az alábbi CSS-szabály hatással lesz az oldal minden HTML-elemére:

 *
{
  text-align: center;
  color: blue;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

A CSS csoportosítás választója

A csoportosítási választó az összes HTML elemet azonos stílusban választja ki definíciók.

Nézze meg a következő CSS-kódot (a h1, h2 és p elemek azonosak stílusdefiníciók):

h1
{
  text-align: center;
  color: red;
}

h2
{
   
text-align: center;
  color: red;
}

p
{
  text-align: center;
  color: red;
}

Jobb lesz csoportosítani a kiválasztókat, minimalizálni a kódot.

A kijelölők csoportosításához vesszővel válassza el az egyes választókat.

Példa

Ebben a példában a fenti kódból csoportosítottuk a kiválasztókat:

h1, h2, p
{
   
text-align: center;
  color: red;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

Minden CSS Simple Selector

Kiválasztó:

#id

Példa:

#firstname

Példa leírás: kiválasztja az id="firstname" elemet

Kiválasztó:

.class

Példa:

.intro

Példa leírás: Az összes elemet kiválasztja a class="intro" karakterlánccal

Kiválasztó:

element.class

Példa:

p.intro

Példa leírás: Csak <p> elemet választ ki class="intro" karakterlánccal

Kiválasztó:

*

Példa:

*

Példa leírás: Az összes elemet kijelöli

Kiválasztó:

element

Példa:

p

Példa leírás: Az összes <p> elemet kijelöli

Kiválasztó:

element,element,..

Példa:

div, p

Példa leírás: kijelöli az összes <div> és az összes <p> elemet