szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[: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.

<code html>
<input type="number" min="3" max="7" value="3">
</code>


<code css>
input:in-range {
    border-style: solid;
    border-width: 3px;
    border-color: red;
}
</code>
===== 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 ====

<code html>
<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>
</code>
<code css>
tr:nth-child(3) {
    background-color: orange;
}
</code>


<html>
<style>
table.harmadik tr:nth-child(3) {
    background-color: orange;
}
</style>
<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>
</html>



==== Páratlanok ====



<code css>
tr:nth-child(odd) {
    background-color: orange;
}
</code>


<html>
<style>
table.paratlan tr:nth-child(odd) {
    background-color: orange;
}
</style>
<table class="paratlan">
  <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>
</html>



==== Párosok ====

<code css>
tr:nth-child(even) {
    background-color: orange;
}
</code>


<html>
<style>
table.paros tr:nth-child(even) {
    background-color: orange;
}
</style>
<table class="paros">
  <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>
</html>

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

<code html>
<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>
</code>


<html>
<style>
#mindenHarmadik div:nth-child(3n+0) {
   background-color: orange;
}
</style>
<div id="mindenHarmadik">

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

</div>
</html>

===== > szelektor =====

<code css>
div > p {

}
</code>

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. 
<code css>
div + p {

}
</code>


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

===== ~ szelektor =====

Adottak a következő elemek:
<code html>
<p>Első p</p>
<div>Div elem</div>
<p>Második p</p>
<p>Harmadik p</p>
</code>

Az összes p elemre vonatkozik a beállítás, amelyet megelőz egy div elem:
<code css>
div ~ p {
    background-color: blueviolet;
}
</code>

===== Attribútum szelektor =====

<code html>
<a>a elem</div>
<a target="_blank">a elem</div>
</code>

<code css>
a[target] {
    background-color: blueviolet;
}
</code>

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

<code html>
<input type="text">
<input type="password">
</code>

<code css>
input[type=text] {
    background-color: blueviolet;
    color: white;
}
</code>

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

<code html>
<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">
</code>

<code css>
img {
    width: 100px;
    height: 100px;
}
img[title~=oroszlán] {
    border: solid 4px navy;
}
</code>


<code css>
img[title*=oroszlán] {
    border: solid 4px navy;
}
</code>

==== Tartalmaz vagy ezzel kezdődik ====
<code html>
<html lang="hu_HU">
</code>

Ha a lang értéke "hu"-val kezdődik:
<code css>
[lang|=hu] {
  background-color: blueviolet;
}
</code>


<code html>
<div class="egy masik">Első</div>
<div class="ketto masik">Második</div>
</code>
Ha a class elem értéke "egy" szóval kezdődik:
<code css>
[class^=egy] {
    background-color: blueviolet;
}
</code>

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

<code html>
<div class="masik egy">Első</div>
<div class="masik ketto">Második</div>
</code>
Ha a class elem értéke "egy" szóra végződik:
<code css>
[class$=egy] {
    background-color: blueviolet;
}
</code>

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

<code html>
<div class="egy">Első</div>
<div class="ketto">Második</div>
<div class="harom">Harmadik</div>
</code>

<code css>
.egy::after {
    content: "utána";
    background-color: blueviolet;
}
</code>

<code css>
.egy::before {
    content: "előtte";
    background-color: blueviolet;
}
</code>

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

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
