CSS
selectors

Invoering

Syntaxis

• # id
• . naam van de klasse
• : pseudo-classname
• :: pseudo-elementnaam
• [ attr ] / * heeft het attr- kenmerk. * /
• [ attr = " value "] / * heeft het attr- attribuut en de waarde ervan is precies " waarde ". * /
• [ attr ~ = " value "] / * heeft het attr- attribuut en de waarde ervan, indien gesplitst op witruimte , bevat " value ". * /
• [ attr | = " value "] / * heeft het attr- attribuut en de waarde ervan is precies " waarde ", of de waarde begint met " waarde - ". * /
• [ attr ^ = " value "] / * heeft het kenmerk attr en de waarde ervan begint met " value ". * /
• [ attr $ = " value "] / * heeft het attr- attribuut en de waarde ervan eindigt op " value ". * /
• [ attr * = " value "] / * heeft het attr- kenmerk en de waarde ervan bevat " value ". * /
• element namen
• *

Opmerkingen

Attribuutselectoren

Overzicht

Attribuutkiezers kunnen worden gebruikt met verschillende typen operatoren die de selectiecriteria dienovereenkomstig wijzigen. Ze selecteren een element met behulp van de aanwezigheid van een bepaald kenmerk of een kenmerkwaarde.

Opmerkingen:

1. De attribuutwaarde kan worden omgeven door enkele aanhalingstekens of dubbele aanhalingstekens. Helemaal geen offertes werken mogelijk ook, maar het is niet geldig volgens de CSS-standaard en wordt afgeraden.

2. Er is geen enkele, geïntegreerde CSS4-specificatie, omdat deze is opgesplitst in afzonderlijke modules. Er zijn echter "niveau 4" -modules. Zie browserondersteuning .

Details

[attribute]

Selecteert elementen met het gegeven attribuut.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Live demo op JSBin

[attribute="value"]

Selecteert elementen met het gegeven kenmerk en de opgegeven waarde.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Live demo op JSBin

[attribute*="value"]

Selecteert elementen met het gegeven attribuut en de waarde waar het gegeven attribuut de gegeven waarde ergens bevat (als een substring).

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Live demo op JSBin

[attribute~="value"]

Selecteert elementen met het gegeven attribuut en de waarde waar de gegeven waarde verschijnt in een door witruimte gescheiden lijst.

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Live demo op JSBin

[attribute^="value"]

Selecteert elementen met het gegeven attribuut en de waarde waar het gegeven attribuut begint met de waarde.

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Live demo op JSBin

[attribute$="value"]

Selecteert elementen met het gegeven kenmerk en de waarde waar het gegeven kenmerk eindigt met de gegeven waarde.

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Live demo op JSBin

[attribute|="value"]

Selecteert elementen met een gegeven attribuut en waarde waarbij de waarde van het attribuut precies de gegeven waarde is of precies de gegeven waarde is, gevolgd door - (U + 002D)

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Live demo op JSBin

[attribute="value" i]

Selecteert elementen met een bepaald attribuut en waarde waarbij de waarde van het attribuut kan worden weergegeven als Value , VALUE , vAlUe of een andere niet-hoofdlettergevoelige mogelijkheid.

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Live demo op JSBin

Specificiteit van kenmerkkiezers

0-1-0

Hetzelfde als klassekiezer en pseudoklasse.

*[type=checkbox] // 0-1-0

Merk op dat dit betekent dat een attribuutkiezer kan worden gebruikt om een element te selecteren op basis van zijn ID op een lager specificiteitsniveau dan wanneer het werd geselecteerd met een ID-selector : [id="my-ID"] richt zich op hetzelfde element als #my-ID maar met lagere specificiteit.

Zie het gedeelte Syntaxis voor meer informatie.

combinators

Overzicht

Opmerking: Sibling-selectors richten zich op elementen die na hen komen in het brondocument. CSS kan door zijn aard (het cascades) niet gericht zijn op vorige of bovenliggende elementen. Echter, met behulp van de flex order pand, een eerdere broer selector kan worden gesimuleerd op de visuele media .

Nakomelingen Combinator: selector selector

Een afstammende combinator, vertegenwoordigd door ten minste één spatie ( ), selecteert elementen die afstammen van het gedefinieerde element. Deze combinator selecteert alle afstammelingen van het element (van onderliggende elementen naar beneden).

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Live demo op JSBin

In het bovenstaande voorbeeld zijn de eerste twee <p> -elementen geselecteerd, omdat ze beide afstammen van de <div> .

Kindercombinator: selector > selector

De onderliggende ( > ) combinator wordt gebruikt om elementen te selecteren die kinderen zijn of directe afstammelingen van het opgegeven element.

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Live demo op JSBin

De bovenstaande CSS selecteert alleen het eerste <p> -element, omdat dit de enige alinea is die rechtstreeks afstamt van een <div> .

Het tweede element <p> is niet geselecteerd omdat het geen direct onderliggend element van de <div> .

Aangrenzende Sibling Combinator: selector + selector

De aangrenzende broer / zus-combinatie ( + ) selecteert een broer / zus-element dat onmiddellijk een bepaald element volgt.

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

Live demo op JSBin

In het bovenstaande voorbeeld worden alleen die <p> -elementen geselecteerd die direct worden voorafgegaan door een ander <p> -element.

General Sibling Combinator: selector ~ selector

De algemene broer / zus-combinatie ( ~ ) selecteert alle broers en zussen die het opgegeven element volgen.

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

Live demo op JSBin

In het bovenstaande voorbeeld worden alle <p> -elementen geselecteerd die worden voorafgegaan door een ander <p> -element, ongeacht of ze direct aan elkaar grenzen.

Klasse naamkiezers

De klassenaamselector selecteert alle elementen met de beoogde klassenaam. De klassenaam .warning zou bijvoorbeeld het volgende <div> -element selecteren:

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

U kunt klassennamen ook specifieker combineren met doelelementen. Laten we voortbouwen op het bovenstaande voorbeeld om een meer gecompliceerde klassenselectie te presenteren.

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

In dit voorbeeld zijn alle elementen met de .warning zal klasse een blauwe tekstkleur hebben, elementen met de .important klas met een tekst oranje kleur, en alle elementen die zowel het hebben .important en .warning klasse naam een rode tekst hebben kleur.

Merk op dat in de CSS de .warning.important verklaring geen spaties .warning.important tussen de twee .warning.important . Dit betekent dat u alleen elementen die bevatten zowel class namen warning en important in hun class attribuut. Die klassenamen kunnen in willekeurige volgorde op het element staan.

Als er een ruimte is opgenomen tussen de twee klassen in de CSS-verklaring, zou het enige elementen die ouder elementen met een te selecteren met .warning klasse namen en onderliggende elementen met .important class namen.

ID selectors

ID-selectors selecteren DOM-elementen met de getargete ID. Om een element te selecteren op basis van een specifieke ID in CSS, wordt het voorvoegsel # gebruikt.

Het volgende HTML- div element ...

<div id="exampleID">
    <p>Example</p>
</div>

... kan worden geselecteerd door #exampleID in CSS zoals hieronder weergegeven:

#exampleID {
    width: 20px;
}

Opmerking : de HTML-specificaties staan geen meerdere elementen met dezelfde ID toe

Pseudo-classes

Pseudoklassen zijn trefwoorden die selectie mogelijk maken op basis van informatie die buiten de documentstructuur ligt of die niet door andere selectors of combinators kan worden uitgedrukt. Deze informatie kan worden gekoppeld aan een bepaalde staat ( staat en dynamische pseudoklassen), locaties ( structurele en doel- pseudoklassen), ontkenningen van de vorige ( ontkenningspseudoklasse ) of talen ( lang pseudoklasse). Voorbeelden zijn of een link al dan niet is gevolgd ( :visited ), de muis zich boven een element bevindt ( :hover ), een selectievakje is aangevinkt ( :checked ), enz.

Syntaxis

selector:pseudo-class { 
    property: value;
}

Lijst met pseudoklassen:

De :visited pseudoklasse kan niet worden gebruikt voor de meeste styling in veel moderne browsers omdat het een beveiligingslek is. Zie deze link voor referentie.

Basic selectors

Opmerking: de waarde van een ID moet uniek zijn op een webpagina. Het is een overtreding van de HTML-standaard om de waarde van een ID meer dan eens in dezelfde documentstructuur te gebruiken.

Een complete lijst met selectors is te vinden in de CSS Selectors Level 3-specificatie .

Stijl van een bereikinvoer

HTML

<input type="range"></input>

CSS

Globale Boolean met checkbox: aangevinkt en ~ (algemene broer / zus combinatie)

Met de ~ selector kunt u eenvoudig een wereldwijd toegankelijke Boolean implementeren zonder JavaScript te gebruiken.

Boolean toevoegen als een selectievakje

Voeg helemaal aan het begin van uw document zoveel booleans toe als u wilt met een unieke id en de hidden attributenset:

<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />

<!-- here begins actual content, for example: -->
<div id="container">
    <div id="sidebar">
        <!-- Menu, Search, ... -->
    </div>

    <!-- Some more content ... -->
</div>

<div id="footer">
    <!-- ... -->
</div>

Wijzig de waarde van de boolean

U kunt de Boolean schakelen door een label toe te voegen met de set for kenmerk:

<label for="sidebarShown">Show/Hide the sidebar!</label>

Toegang tot booleaanse waarde met CSS

De normale selector (zoals .color-red ) geeft de standaardeigenschappen aan. Ze kunnen worden opgeheven door de true / false selectors te volgen:

/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>

/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>

Merk op dat <checkbox> , [sibling ...] en <target> moeten worden vervangen door de juiste selectors. [sibling ...] kan een specifieke selector zijn, (vaak als je lui bent) gewoon * of niets als het doel al een broer of zus van het selectievakje is.

Voorbeelden voor de bovenstaande HTML-structuur zijn:

#sidebarShown:checked ~ #container #sidebar {
    margin-left: 300px;
}

#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
    background: #333;
}

In actie

Zie deze viool voor een implementatie van deze wereldwijde Booleans.

CSS3: voorbeeld van in-range selector

<style>
input:in-range {
    border: 1px solid blue;
}
</style>



<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

De :in-range CSS pseudoklasse komt overeen wanneer een element zijn waardekenmerk binnen de opgegeven bereikbeperkingen voor dit element heeft. Hiermee kan de pagina een feedback geven dat de waarde die momenteel met het element is gedefinieerd, binnen de bereiklimieten valt. [1]

Pseudoklasse voor kinderen

"De: nth-child (an + b) CSS pseudoklasse komt overeen met een element met een + b-1 broers en zussen ervoor in de documentboom, voor een gegeven positieve of nulwaarde voor n" - MDN: nth-child

Selecteer element met behulp van zijn ID zonder de hoge specificiteit van de ID-selector

Deze truc helpt u bij het selecteren van een element met de ID als een waarde voor een kenmerkkiezer om de hoge specificiteit van de ID-selector te voorkomen.

HTML:

<div id="element">...</div>  

CSS

#element { ... } /* High specificity will override many selectors */

[id="element"] { ... } /* Low specificity, can be overridden easily */

A. De: niet pseudoklasse voorbeeld & B.: focus-binnen CSS pseudoklasse

A. De syntaxis wordt hierboven weergegeven.

De volgende selector komt overeen met alle <input> -elementen in een HTML-document die niet zijn uitgeschakeld en niet de klasse .example :

HTML:

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS:

input:not([disabled]):not(.example){
   background-color: #ccc;
}

De :not() pseudoklasse ondersteunt ook door komma's gescheiden selectors in Selectors Level 4:

CSS:

input:not([disabled], .example){
   background-color: #ccc;
}

Live demo op JSBin

Zie achtergrondsyntaxis hier .

B. De: focus - binnen CSS-pseudoklasse

HTML:

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS:

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

Het: pseudoklasse-selectorvoorbeeld voor alleen kinderen

De :only-child CSS pseudoklasse :only-child vertegenwoordigt elk element dat het enige kind van de ouder is.

HTML:

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

<div>
  <p>This paragraph is one of the two children of the div</p>
  <p>This paragraph is one of the two children of its parent</p>
</div>

CSS:

p:only-child {
  color: blue;
}

In het bovenstaande voorbeeld wordt het element <p> geselecteerd dat het unieke onderliggende element is van de ouder, in dit geval een <div> .

Live demo op JSBin

De: laatste type-selector

De :last-of-type selecteert het element dat het laatste kind is, van een bepaald type, van zijn ouder. In het onderstaande voorbeeld selecteert de css de laatste alinea en de laatste kop h1 .

p:last-of-type { 
  background: #C5CAE9; 
}
h1:last-of-type { 
  background: #CDDC39; 
}

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
    <h1>Heading 1</h1>
    <h2>First heading 2</h2>
    <h2>Last heading 2</h2>
</div>

jsFiddle