CSS álosztályok

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Mik azok a pszeudoosztályok?

Egy pszeudoosztályt használnak egy speciális állapot meghatározására egy elemről.

Például a következőkre használható:

  • Stílusozzon egy elemet, amikor a felhasználó rámutat

  • A meglátogatott és nem látogatott linkek stílusa eltérő

  • Stílusozzon egy elemet, amikor az fókuszba kerül

Mouse Over Me

Szintaxis

A pszeudoosztályok szintaxisa:

selector:pseudo-class {
  property: value;
}

Horgony pszeudo-osztályok

A hivatkozások többféleképpen jeleníthetők meg:

Példa

  /* unvisited link */
a:link {
  color: #FF0000;
}
/* visited 
link */
a:visited {
  color: #00FF00;
}
/* mouse over link */
a:hover {
  color: #FF00FF;
}
/* selected link */
a:active {
  color: #0000FF;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Megjegyzés: a:hover az a:link után KELL jönnie a:visited a CSS-definícióban a hatékonyság érdekében! Az a:active után KELL jönnie a:hover a CSS-definícióban a hatékonyság érdekében! A pszeudoosztálynevek nem tesznek különbséget a kis- és nagybetűk között.

Álosztályok és HTML osztályok

A pszeudoosztályok kombinálhatók HTML osztályokkal:

Ha a példában szereplő hivatkozás fölé viszi az egérmutatót, annak színe megváltozik:

Példa

a.highlight:hover {
  color: #ff0000;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

Mutasson rá a <div> elemre

Példa a :hover pszeudoosztály használatára <div> elemen:

Példa

div:hover {
  background-color: blue;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

Simple Tooltip Hover

Vigye az egérmutatót egy <div> elem fölé egy <p> elem megjelenítéséhez (például egy eszköztipp):

Tada! Itt vagyok!

Példa

p {
  display: none;
  
background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>

CSS - Az :first-child pszeudoosztály

A :first-child pszeudoosztály egy olyan meghatározott elemre egyezik, amely egy másik elem első gyermeke.

Illessze az első <p> elemet

A következő példában a választó bármely <p> elemre illeszkedik, amely bármely elem első gyermeke:

Példa

p:first-child
{
   
color: blue;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>

</body>
</html>

Illessze az első <i> elemet az összes <p> elemben

A következő példában a választó minden <p> elemben megegyezik az első <i> elemmel:

Példa

p i:first-child
{
   
color: blue;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

Illessze az összes <i> elemet az összes első gyermek <p> elemben

A következő példában a választó minden <i> elemet egyeztet a <p> elemekben, amelyek egy másik elem első gyermekei:

Példa

p:first-child i
{
  color: blue;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>

CSS - A :lang pszeudoosztály

A :lang pszeudoosztály lehetővé teszi speciális szabályok meghatározását a különböző nyelvekhez.

Az alábbi példában a :lang határozza meg a lang="no" karakterláncú elemek idézőjeleit:

Példa

<html>
<head>
<style>
  q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> 
Some text.</p>

</body>
</html>

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>

További példák

Különböző stílusok hozzáadása a hiperhivatkozásokhoz

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

A :focus használata

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Minden CSS pszeudo osztály

:active

Példa:

a:active

Példa leírás:

Kiválasztja az aktív hivatkozást

:checked

Példa:

input:checked

Példa leírás:

Kijelöl minden bejelölt <input> elemet

:disabled

Példa:

input:disabled

Példa leírás:

Kijelöl minden letiltott <input> elemet

:empty

Példa:

p:empty

Példa leírás:

Kijelöl minden olyan <p> elemet, amelynek nincs gyermeke

:enabled

Példa:

input:enabled

Példa leírás:

Kijelöl minden engedélyezett <input> elemet

:first-child

Példa:

p:first-child

Példa leírás:

Kijelöl minden olyan <p> elemet, amely a szülőjének első gyermeke

:first-of-type

Példa:

p:first-of-type

Példa leírás:

Kijelöl minden <p> elemet, amely a szülő elemének első <p> eleme

:focus

Példa:

input:focus

Példa leírás:

Kijelöli a fókuszban lévő <input> elemet

:hover

Példa:

a:hover

Példa leírás:

Kijelöli a hivatkozásokat az egérrel

:in-range

Példa:

input:in-range

Példa leírás:

Olyan <input> elemeket választ ki, amelyek értéke egy adott tartományon belül van

:invalid

Példa:

input:invalid

Példa leírás:

Kijelöli az összes érvénytelen értékű <input> elemet

:lang(language)

Példa:

p:lang(it)

Példa leírás:

Kijelöl minden <p> elemet, amelynek lang attribútumértéke "it" kezdődik

:last-child

Példa:

p:last-child

Példa leírás:

Kijelöl minden olyan <p> elemet, amely a szülő utolsó gyermeke

:last-of-type

Példa:

p:last-of-type

Példa leírás:

Kijelöl minden olyan <p> elemet, amely a szülőjének utolsó <p> eleme

:link

Példa:

a:link

Példa leírás:

Kijelöli az összes nem látogatott hivatkozást

:not(selector)

Példa:

:not(p)

Példa leírás:

Kijelöl minden olyan elemet, amely nem <p> elem

:nth-child(n)

Példa:

p:nth-child(2)

Példa leírás:

Kijelöl minden olyan <p> elemet, amely a szülőjének második gyermeke

:nth-last-child(n)

Példa:

p:nth-last-child(2)

Példa leírás:

Kijelöl minden olyan <p> elemet, amely a szülőjének második gyermeke, az utolsó gyermektől számítva

:nth-last-of-type(n)

Példa:

p:nth-last-of-type(2)

Példa leírás:

Kijelöl minden olyan <p> elemet, amely a szülőjének második <p> eleme, az utolsó gyermektől számítva

:nth-of-type(n)

Példa:

p:nth-of-type(2)

Példa leírás:

Kijelöl minden olyan <p> elemet, amely a szülőjének második <p> eleme

:only-of-type

Példa:

p:only-of-type

Példa leírás:

Kijelöl minden <p> elemet, amely a szülőjének egyetlen <p> eleme

:only-child

Példa:

p:only-child

Példa leírás:

Kijelöl minden olyan <p> elemet, amely a szülőjének egyetlen gyermeke

:optional

Példa:

input:optional

Példa leírás:

Kiválasztja az <input> elemeket "kötelező" attribútum nélkül

:out-of-range

Példa:

input:out-of-range

Példa leírás:

A megadott tartományon kívül eső értékű <input> elemeket választ ki

:read-only

Példa:

input:read-only

Példa leírás:

Kiválasztja az „csak olvasható” attribútummal rendelkező <input> elemeket

:read-write

Példa:

input:read-write

Példa leírás:

Kijelöli az „csak olvasható” attribútum nélküli <input> elemeket

:required

Példa:

input:required

Példa leírás:

Kiválasztja az <input> elemeket a megadott "szükséges" attribútummal

:root

Példa:

root

Példa leírás:

Kijelöli a dokumentum gyökérelemét

:target

Példa:

#news:target

Példa leírás:

Kijelöli az aktuális aktív #news elemet (a horgonynevet tartalmazó URL-re kattintva)

:valid

Példa:

input:valid

Példa leírás:

Kijelöli az összes érvényes értékű <input> elemet

:visited

Példa:

a:visited

Példa leírás:

Kijelöli az összes meglátogatott hivatkozást

Minden CSS pszeudo elem

::after

Példa:

p::after

Példa leírás:

Szúrjon be tartalmat minden <p> elem után

::before

Példa:

p::before

Példa leírás:

Szúrjon be tartalmat minden <p> elem elé

::first-letter

Példa:

p::first-letter

Példa leírás:

Kijelöli minden <p> elem első betűjét

::first-line

Példa:

p::first-line

Példa leírás:

Kijelöli minden <p> elem első sorát

::marker

Példa:

::marker

Példa leírás:

Kiválasztja a listaelemek jelölőit

::selection

Példa:

p::selection

Példa leírás:

Kijelöli az elemnek a felhasználó által kiválasztott részét