[[:oktatas:web:css|< CSS]] ====== CSS szelektorok ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2020 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== 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: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 ====



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


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) * Az "a" ciklus léptéke * Az "n" egy számláló * A "b" eltolás (hol kezdjük)


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

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 elem
Első p
Második p

===== ~ szelektor ===== Adottak a következő elemek:


Első p
Div elem
Második p
Harmadik 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 elem
a elem


a[target] {
    background-color: blueviolet;
}

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


input[type=text] {
    background-color: blueviolet;
    color: white;
}

==== Tartalmaz egy értéket ====


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

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


[lang|=hu] {
  background-color: blueviolet;
}


Első
Második

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


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

==== Végződés ====


Első
Második

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


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

===== Utána, előtte =====


Első
Második
Harmadik


.egy::after {
    content: "utána";
    background-color: blueviolet;
}


.egy::before {
    content: "előtte";
    background-color: blueviolet;
}

===== Linkek ===== * https://www.w3schools.com/cssref/css_selectors.asp