CSS
väljare

Introduktion

Syntax

• # id
• . klassnamn
• : pseudoklassnamn
• :: pseudo-elementnamn
• [ attr ] / * har atttr- attributet. * /
• [ attr = " värde "] / * har attr- attributet, och dess värde är exakt " värde ". * /
• [ attr ~ = " värde "] / * har atttr- attributet, och dess värde, när det är uppdelat på vitrummet , innehåller " värde ". * /
• [ attr | = " värde "] / * har atttr- attributet, och dess värde är exakt " värde ", eller dess värde börjar med " värde - ". * /
• [ attr ^ = " värde "] / * har atttr- attributet, och dess värde börjar med " värde ". * /
• [ attr $ = " värde "] / * har atttr- attributet, och dess värde slutar med " värde ". * /
• [ attr * = " värde "] / * har attr- attributet, och dess värde innehåller " värde ". * /
• elementnamn
• *

Anmärkningar

Attributväljare

Översikt

Attributväljare kan användas med olika typer av operatörer som ändrar urvalskriterierna i enlighet därmed. De väljer ett element med närvaron av ett givet attribut eller attributvärde.

Anmärkningar:

1. Attributvärdet kan omges av antingen enstaka citationstecken eller dubbla citationstecken. Inga offertar kanske också fungerar, men det är inte giltigt enligt CSS-standarden och är avskräckt.

2. Det finns ingen enda, integrerad CSS4-specifikation, eftersom den är uppdelad i separata moduler. Men det finns "nivå 4" -moduler. Se webbläsarsupport .

detaljer

[attribute]

Väljer element med det givna attributet.

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 på JSBin

[attribute="value"]

Väljer element med det givna attributet och värdet.

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 på JSBin

[attribute*="value"]

Väljer element med det givna attributet och värdet där det givna attributet innehåller det givna värdet var som helst (som en 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 på JSBin

[attribute~="value"]

Väljer element med det givna attributet och värdet där det givna värdet visas i en mellanrumsskild lista.

[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 på JSBin

[attribute^="value"]

Väljer element med det givna attributet och värdet där det givna attributet börjar med värdet.

[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 på JSBin

[attribute$="value"]

Väljer element med det givna attributet och värdet där det givna attributet slutar med det givna värdet.

[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 på JSBin

[attribute|="value"]

Väljer element med ett givet attribut och värde där attributets värde är exakt det givna värdet eller exakt det givna värdet följt av - (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 på JSBin

[attribute="value" i]

Väljer element med ett givet attribut och värde där attributets värde kan representeras som Value , VALUE , vAlUe eller någon annan VALUE vAlUe möjlighet.

[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 på JSBin

Specificitet för attributväljare

0-1-0

Samma som klassväljare och pseudoklass.

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

Observera att detta innebär att ett attributväljare kan användas för att välja ett element med dess ID på en lägre specificitetsnivå än om det valts med en ID-väljare : [id="my-ID"] riktar mot samma element som #my-ID men med lägre specificitet.

Se Syntaxavsnittet för mer information.

kombinatorer

Översikt

Obs! Syskonväljare är inriktade på element som kommer efter dem i källdokumentet. CSS kan i sin natur (det kaskader) inte rikta in sig på tidigare eller överordnade element. Men med hjälp av flex order egendom, en tidigare syskon väljare kan simuleras på visuella medier .

Descendant Combinator: selector selector

En efterkommande kombinator, representerad av minst en rymdkaraktär ( ), väljer element som är en ättling till det definierade elementet. Denna kombinator väljer alla ättlingar till elementet (från barnelement på ner).

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 på JSBin

I exemplet ovan väljs de första två <p> -elementen eftersom de båda är ättlingar till <div> .

Child Combinator: selector > selector

Barnet ( > ) -kombinatorn används för att välja element som är barn , eller direkt ättlingar , till det angivna elementet.

div > p {
  color:red;
}

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

Live Demo på JSBin

Ovanstående CSS väljer endast det första <p> -elementet, eftersom det är det enda stycket som härstammar direkt från en <div> .

Det andra <p> -elementet är inte valt eftersom det inte är ett direkt barn till <div> .

Intilliggande syskon Combinator: selector + selector

Den intilliggande syskonkombinatorn ( + ) väljer ett syskonelement som omedelbart följer ett specificerat element.

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 på JSBin

Exemplet ovan väljer endast de <p> -element som direkt föregås av ett annat <p> -element.

General Sibling Combinator: selector ~ selector

Den generella syskonkombinatorn ( ~ ) väljer alla syskon som följer det angivna elementet.

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 på JSBin

Exemplet ovan väljer alla <p> -element som föregås av ett annat <p> -element, oavsett om de är direkt intill eller inte.

Klassnamnsväljare

Klassnamnsväljaren väljer alla element med det riktade klassnamnet. Till exempel skulle .warning välja följande <div> -element:

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

Du kan också kombinera klassnamn till målelement mer specifikt. Låt oss bygga på exemplet ovan för att visa upp ett mer komplicerat klassval.

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>

I det här exemplet kommer alla element med klassen .warning att ha en blå textfärg, element med klassen .important med har en orange textfärg, och alla element som har både .important och .warning namn har en röd text Färg.

Observera att inom CSS hade .warning.important deklarationen inte några utrymmen mellan de två klassnamnen. Detta innebär att det kommer bara att hitta element som innehåller både klassnamn warning och important i sin class attribut. Dessa klassnamn kan vara i valfri ordning på elementet.

Om ett mellanslag inkluderades mellan de två klasserna i CSS-deklarationen, skulle det bara välja element som har överordnade element med ett .warning och .important element med .important .

ID-väljare

ID-väljare väljer DOM-element med inriktat ID. För att välja ett element med ett specifikt ID i CSS används prefixet # .

Till exempel följande HTML div element ...

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

... kan väljas av #exampleID i CSS som visas nedan:

#exampleID {
    width: 20px;
}

Obs! HTML-specifikationerna tillåter inte flera element med samma ID

Pseudo-klasser

Pseudoklasser är nyckelord som tillåter val baserat på information som ligger utanför dokumentträdet eller som inte kan uttryckas av andra väljare eller kombinatorer. Denna information kan vara associerade till en viss stat ( statliga och dynamiska pseudo-klasser), till platser ( strukturella och mål- pseudo-klasser), till negationer i fd ( negation pseudo klass) eller till språk ( lang pseudo klass). Exempel inkluderar huruvida en länk har följts eller inte ( :visited ), musen är över ett element ( :hover ), en kryssruta är markerad ( :checked ), etc.

Syntax

selector:pseudo-class { 
    property: value;
}

Lista över pseudoklasser:

Den :visited pseudoklass kan inte användas för mest styling i många moderna webbläsare längre eftersom det är ett säkerhetshål. Se den här länken för referens.

Grundläggande väljare

Obs: Värdet på ett ID måste vara unikt på en webbsida. Det är en kränkning av HTML-standarden att använda värdet på ett ID mer än en gång i samma dokumentträd.

En komplett lista över väljare finns i CSS Selectors Level 3-specifikationen .

Så utformar du en intervallingång

html

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

CSS

Global booleska med kryssruta: kontrollerad och ~ (allmän syskombination)

Med ~ -väljaren kan du enkelt implementera en globalt tillgänglig boolean utan att använda JavaScript.

Lägg till boolean som kryssruta

Till början av ditt dokument lägger du till så mycket booleaner som du vill med en unik id och den hidden attributuppsättningen:

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

Ändra booleanernas värde

Du kan växla booleanen genom att lägga till en label med for attributuppsättningen:

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

Få tillgång till booleskt värde med CSS

Den normala väljaren (som. .color-red ) anger standardegenskaperna. De kan åsidosättas genom att följa true / false väljare:

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

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

Observera att <checkbox> , [sibling ...] och <target> ska ersättas med rätt väljare. [sibling ...] kan vara en specifik väljare, (ofta om du är lat) helt enkelt * eller ingenting om målet redan är ett syskon till kryssrutan.

Exempel på ovanstående HTML-struktur skulle vara:

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

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

I aktion

Se denna fiol för en implementering av dessa globala booleaner.

CSS3: Inom räckväljaren exempel

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

CSS-pseudoklassen :in-range matchar när ett element har sitt värdeattribut inom de angivna områdesbegränsningarna för detta element. Det gör att sidan kan ge en feedback om att det värde som för närvarande definieras med hjälp av elementet ligger inom gränserna för intervall. [1]

Child Pseudo Class

"The: nth-child (an + b) CSS pseudo-class matchar ett element som har ett + b-1 syskon före det i dokumentträdet, för ett givet positivt eller nollvärde för n" - MDN: nth-child

Välj element med dess ID utan ID-väljarens höga specificitet

Detta trick hjälper dig att välja ett element som använder ID som ett värde för en attributväljare för att undvika ID-väljarens höga specificitet.

HTML:

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

CSS

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

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

A. Exemplet: inte pseudoklass & B.: fokus inom CSS-pseudoklass

A. Syntaxen presenteras ovan.

Följande väljare matchar alla <input> -element i ett HTML-dokument som inte är inaktiverade och inte har klassen .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;
}

Pseudoklassen :not() stöder också kommaseparerade väljare i Selectors Level 4:

CSS:

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

Live Demo på JSBin

Se bakgrundssyntax här .

B. Fokus inom CSS-pseudoklass

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

Exempel på väljarknapp för pseudoklass

CSS pseudoklassen för :only-child representerar alla element som är det enda barnet till dess förälder.

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

Exemplet ovan väljer <p> -elementet som är det unika barnet från dess förälder, i detta fall en <div> .

Live Demo på JSBin

Väljarens sista typ

Den :last-of-type väljer elementet som är det sista barnet, av en viss typ, av dess förälder. I exemplet nedan väljer css det sista stycket och den sista rubriken 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