Tartalomjegyzék

< CSS

CSS szelektorok

Az in-range

A beállítások csak az intervallumba eső (min és max értékek között) számok esetén érvényesül. 

<input type="number" min="3" max="7" value="3">
input:in-range {
    border-style: solid;
    border-width: 3px;
    border-color: red;
}

Az nth-child ál-osztály

Az ál-osztály lehetővé teszi, hogy adott sorszámú elemeknek külön beállításokat adjunk meg.

n-dik

<table class="harmadik">
  <tr>
    <td>termék1</td>
    <td>termék2</td>
  </tr>
  <tr>
    <td>termék1</td>
    <td>termék2</td>
  </tr>
  <tr>
    <td>termék1</td>
    <td>termék2</td>
  </tr>
  <tr>
    <td>termék1</td>
    <td>termék2</td>
  </tr>
</table>
tr:nth-child(3) {
    background-color: orange;
}

termék1 termék2
termék1 termék2
termék1 termék2
termék1 termék2

Páratlanok

tr:nth-child(odd) {
    background-color: orange;
}

termék1 termék2
termék1 termék2
termék1 termék2
termék1 termék2

Párosok

tr:nth-child(even) {
    background-color: orange;
}

termék1 termék2
termék1 termék2
termék1 termék2
termék1 termék2

n-dik ciklikusan

nth-child(an+b) 

<div>Első doboz</div>
<div>Második doboz</div>
<div>Harmadik doboz</div>
<div>Negyedik doboz</div>
<div>Ötödik doboz</div>
<div>Hatodik doboz</div>
<div>Hetedik doboz</div>
<div>Nyolacdik doboz</div>
<div>Kilencedik doboz</div>
<div>Tizedik doboz</div>
</div>Tizenegyedik doboz</div>

Első doboz
Második doboz
Harmadik doboz
Negyedik doboz
Ötödik doboz
Hatodik doboz
Hetedik doboz
Nyolacdik doboz
Kilencedik doboz
Tizedik doboz
Tizenegyedik doboz

> szelektor

div > p {
 
}

A div > p az összes olyan p elemre vonatkozik, amelynek a szülője div elem.

+ szelektor

A div után az első p elem. 

div + p {
 
}
<div>Div elem</div>
<p>Első p</p>
<p>Második p</p>

~ szelektor

Adottak a következő elemek: 

<p>Első p</p>
<div>Div elem</div>
<p>Második p</p>
<p>Harmadik p</p>

Az összes p elemre vonatkozik a beállítás, amelyet megelőz egy div elem: 

div ~ p {
    background-color: blueviolet;
}

Attribútum szelektor

<a>a elem</div>
<a target="_blank">a elem</div>
a[target] {
    background-color: blueviolet;
}

Az attribútum értékének vizsgálata

<input type="text">
<input type="password">
input[type=text] {
    background-color: blueviolet;
    color: white;
}

Tartalmaz egy értéket

<img src="oroszlan.jpg" alt="oroszlán" title="oroszlán a sivatagban">
<img src="tigris.jpg" alt="tigris" title="tigris a sivatagban">
<img src="oroszlan2.jpg" alt="oroszlán" title="tigris a sivatagban">
img {
    width: 100px;
    height: 100px;
}
img[title~=oroszlán] {
    border: solid 4px navy;
}
img[title*=oroszlán] {
    border: solid 4px navy;
}

Tartalmaz vagy ezzel kezdődik

<html lang="hu_HU">

Ha a lang értéke „hu”-val kezdődik: 

[lang|=hu] {
  background-color: blueviolet;
}
<div class="egy masik">Első</div>
<div class="ketto masik">Második</div>

Ha a class elem értéke „egy” szóval kezdődik: 

[class^=egy] {
    background-color: blueviolet;
}

Végződés

<div class="masik egy">Első</div>
<div class="masik ketto">Második</div>

Ha a class elem értéke „egy” szóra végződik: 

[class$=egy] {
    background-color: blueviolet;
}

Utána, előtte

<div class="egy">Első</div>
<div class="ketto">Második</div>
<div class="harom">Harmadik</div>
.egy::after {
    content: "utána";
    background-color: blueviolet;
}
.egy::before {
    content: "előtte";
    background-color: blueviolet;
}

Linkek