CSS
Selektory

Wprowadzenie

Składnia

• # id
• . Nazwa klasy
• : pseudo-nazwa klasy
• :: pseudoelement
• [ attr ] / * ma atrybut attr . * /
• [ attr = „ wartość ”] / * ma atrybut attr , a jego wartość to dokładnie „ wartość ”. * /
• [ attr ~ = „ wartość ”] / * ma atrybut attr , a jego wartość, gdy jest podzielona na białe znaki , zawiera „ wartość ”. * /
• [ attr | = „ wartość ”] / * ma atrybut attr , a jego wartość to dokładnie „ wartość ”, lub jego wartość zaczyna się od „ wartość - ”. * /
• [ attr ^ = „ wartość ”] / * ma atrybut attr , a jego wartość zaczyna się od „ wartość ”. * /
• [ attr $ = „ wartość ”] / * ma atrybut attr , a jego wartość kończy się na „ wartość ”. * /
• [ attr * = „ wartość ”] / * ma atrybut attr , a jego wartość zawiera „ wartość ”. * /
• nazwa elementu
• *

Uwagi

Selektory atrybutów

Przegląd

Selektory atrybutów mogą być używane z różnymi typami operatorów, które odpowiednio zmieniają kryteria wyboru. Wybierają element na podstawie obecności danego atrybutu lub wartości atrybutu.

Uwagi:

1. Wartość atrybutu może być otoczona pojedynczymi lub podwójnymi cudzysłowami. Żaden cytat może w ogóle nie działać, ale nie jest zgodny ze standardem CSS i jest odradzany.

2. Nie ma jednej zintegrowanej specyfikacji CSS4, ponieważ jest ona podzielona na osobne moduły. Istnieją jednak moduły „poziomu 4”. Zobacz obsługę przeglądarki .

Detale

[attribute]

Wybiera elementy o podanym atrybucie.

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>

Demo na żywo na JSBin

[attribute="value"]

Wybiera elementy o podanym atrybucie i wartości.

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>

Demo na żywo na JSBin

[attribute*="value"]

Wybiera elementy o podanym atrybucie i wartości, w przypadku gdy podany atrybut zawiera podaną wartość w dowolnym miejscu (jako podłańcuch).

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

Demo na żywo na JSBin

[attribute~="value"]

Wybiera elementy o podanym atrybucie i wartości, w których dana wartość pojawia się na liście oddzielonej spacjami.

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

Demo na żywo na JSBin

[attribute^="value"]

Wybiera elementy o podanym atrybucie i wartości, od których dany atrybut zaczyna się od wartości.

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

Demo na żywo na JSBin

[attribute$="value"]

Wybiera elementy o podanym atrybucie i wartości, w których dany atrybut kończy się podaną wartością.

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

Demo na żywo na JSBin

[attribute|="value"]

Wybiera elementy o danym atrybucie i wartości, w których wartość atrybutu jest dokładnie podaną wartością lub jest dokładnie podaną wartością, po której następuje - (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>

Demo na żywo na JSBin

[attribute="value" i]

Wybiera elementy o danym atrybucie i wartości, w których wartość atrybutu może być reprezentowana jako Value , VALUE , vAlUe lub każda inna możliwość bez rozróżniania wielkości liter.

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

Demo na żywo na JSBin

Specyfika selektorów atrybutów

0-1-0

Taki sam jak selektor klasy i pseudoklasa.

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

Zauważ, że oznacza to, że selektora atrybutów można użyć do wybrania elementu za pomocą jego identyfikatora na niższym poziomie specyficzności niż w przypadku wybrania go za pomocą selektora identyfikatora : [id="my-ID"] kierowany na ten sam element, co #my-ID ale o niższej specyficzności.

Aby uzyskać więcej informacji, zobacz sekcję Składnia .

Kombinatory

Przegląd

Uwaga: Selektory rodzeństwa są ukierunkowane na elementy, które występują po nich w dokumencie źródłowym. CSS ze swojej natury (kaskadowo) nie może kierować na poprzednie ani macierzyste elementy. Jednak za pomocą właściwości flex order poprzedni selektor rodzeństwa można symulować na nośnikach wizualnych .

Descendant Combinator: selector selector

Kombinator potomny reprezentowany przez co najmniej jeden znak spacji ( ), wybiera elementy, które są potomkami zdefiniowanego elementu. Ten kombinator wybiera wszystkich potomków elementu (od elementów potomnych w dół).

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>

Demo na żywo na JSBin

W powyższym przykładzie wybrane są dwa pierwsze elementy <p> , ponieważ oba są potomkami <div> .

Kombinator dziecięcy: selector > selector

Kombinator potomny ( > ) służy do wybierania elementów, które są dziećmi lub bezpośrednimi potomkami określonego elementu.

div > p {
  color:red;
}

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

Demo na żywo na JSBin

Powyższy CSS wybiera tylko pierwszy element <p> , ponieważ jest to jedyny akapit bezpośrednio pochodzący z <div> .

Drugi element <p> nie został wybrany, ponieważ nie jest bezpośrednim dzieckiem elementu <div> .

Sąsiadujący kombinator rodzeństwa: selector + selector

Kombinator sąsiedniego rodzeństwa ( + ) wybiera element rodzeństwa, który bezpośrednio podąża za określonym elementem.

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>

Demo na żywo na JSBin

Powyższy przykład wybiera tylko te elementy <p> , które są bezpośrednio poprzedzone innym elementem <p> .

Generalny kombinator rodzeństwa: selector ~ selector

Ogólny kombinator rodzeństwa ( ~ ) wybiera wszystkie rodzeństwo następujące po określonym elemencie.

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>

Demo na żywo na JSBin

Powyższy przykład wybiera wszystkie elementy <p> , które są poprzedzone innym elementem <p> , niezależnie od tego, czy są one bezpośrednio sąsiadujące.

Selektory nazw klas

Selektor nazwy klasy wybiera wszystkie elementy o docelowej nazwie klasy. Na przykład nazwa klasy .warning wybrałaby następujący element <div> :

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

Możesz także łączyć nazwy klas, aby precyzyjniej określać elementy docelowe. Oprzyjmy się na powyższym przykładzie, aby pokazać bardziej skomplikowany wybór klas.

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>

W tym przykładzie wszystkie elementy z klasą .warning będą miały niebieski kolor tekstu, elementy z klasą .important mają pomarańczowy kolor tekstu, a wszystkie elementy, które mają zarówno nazwę klasy .important i .warning będą miały czerwony tekst kolor.

Zauważ, że w CSS deklaracja .warning.important nie zawierała spacji między nazwami dwóch klas. Oznacza to, że znajdzie tylko te elementy, które zawierają oba warning nazwach klas i są important w ich atrybutach class . Te nazwy klas mogą być w dowolnej kolejności na elemencie.

Jeśli spacja zostanie zawarta między dwiema klasami w deklaracji CSS, wybiorą tylko elementy, które mają elementy nadrzędne z .warning klas .warning i elementy podrzędne z nazwami .important klas.

Selektory identyfikatorów

Selektory identyfikatorów wybierają elementy DOM o docelowym identyfikatorze. Aby wybrać element według określonego identyfikatora w CSS, używany jest prefiks # .

Na przykład następujący element div HTML…

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

… Można wybrać za pomocą #exampleID w CSS, jak pokazano poniżej:

#exampleID {
    width: 20px;
}

Uwaga : specyfikacje HTML nie zezwalają na wiele elementów o tym samym identyfikatorze

Pseudoklasy

Pseudoklasy są słowami kluczowymi, które umożliwiają wybór na podstawie informacji, które znajdują się poza drzewem dokumentu lub które nie mogą być wyrażone przez inne selektory lub kombinatory. Informacje te można powiązać z pewnym stanem (pseudoklasy stanowe i dynamiczne ), lokalizacjami (pseudoklasy strukturalne i docelowe ), negacjami pierwszej (pseudoklasa negacyjna ) lub językami (pseudoklasa lang ). Przykłady obejmują to, czy podążono za linkiem ( :visited ), wskaźnik myszy znajduje się nad elementem ( :hover ), pole wyboru jest zaznaczone ( :checked ) itp.

Składnia

selector:pseudo-class { 
    property: value;
}

Lista pseudoklas:

Pseudoklasa :visited nie może być już używana do większości stylizacji w wielu współczesnych przeglądarkach, ponieważ jest to luka w zabezpieczeniach. Zobacz ten link w celach informacyjnych.

Podstawowe selektory

Uwaga: wartość identyfikatora musi być unikalna na stronie internetowej. Używanie wartości identyfikatora więcej niż jeden raz w tym samym drzewie dokumentów jest niezgodne ze standardem HTML .

Pełna lista selektorów znajduje się w specyfikacji CSS Selecters Level 3 .

Jak stylizować wejście Range

HTML

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

CSS

Global boolean z polem wyboru: zaznaczone i ~ (ogólny kombinator rodzeństwa)

Za pomocą selektora ~ można łatwo wdrożyć globalnie dostępny boolean bez użycia JavaScript.

Dodaj wartość logiczną jako pole wyboru

Na samym początku dokumentu dodaj tyle boolanów, ile chcesz, z unikalnym id i hidden zestawem atrybutów:

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

Zmień wartość logiczną

Możesz przełączać wartość logiczną, dodając label z zestawem atrybutów for :

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

Dostęp do wartości logicznej za pomocą CSS

Normalny selektor (jak .color-red ) określa właściwości domyślne. Można je zastąpić, stosując następujące selektory true / false :

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

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

Zauważ, że <checkbox> , [sibling ...] i <target> powinny zostać zastąpione odpowiednimi selektorami. [sibling ...] może być konkretnym selektorem (często jeśli jesteś leniwy) po prostu * lub niczym, jeśli cel jest już rodzeństwem pola wyboru.

Przykłady powyższej struktury HTML to:

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

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

W akcji

Zobacz tę skrzynkę, aby zapoznać się z implementacją tych globalnych boolanów.

CSS3: przykład selektora zakresu

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

Pseudoklasa :in-range CSS pasuje, gdy element ma atrybut wartości wewnątrz określonych ograniczeń zakresu dla tego elementu. Pozwala to stronie wyrazić opinię, że wartość aktualnie zdefiniowana za pomocą elementu mieści się w granicach zakresu. [1]

Pseudoklasa dziecięca

„Pseudoklasa: nth-child (an + b) CSS pasuje do elementu, który ma w drzewie dokumentu rodzeństwo + b-1 przed nim, dla danej wartości dodatniej lub zerowej dla n” - MDN: nth-child

Wybierz element za pomocą jego identyfikatora bez wysokiej swoistości selektora ID

Ta sztuczka pomaga wybrać element wykorzystujący identyfikator jako wartość dla selektora atrybutów, aby uniknąć wysokiej specyficzności selektora ID.

HTML:

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

CSS

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

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

A. Przykład: nie pseudoklasowy i B.: focus-in pseudoklasowy CSS

A. Składnia została przedstawiona powyżej.

Poniższy selektor pasuje do wszystkich elementów <input> w dokumencie HTML, które nie są wyłączone i nie mają klasy. .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;
}

Pseudoklasa :not() będzie również obsługiwać selektory rozdzielane przecinkami na poziomie selektorów 4:

CSS:

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

Demo na żywo na JSBin

Zobacz składnię w tle tutaj .

B. Pseudo-klasa CSS

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

Przykład selektora pseudoklasy: only-child

Pseudoklasa :only-child CSS reprezentuje każdy element, który jest jedynym dzieckiem jego rodzica.

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

Powyższy przykład wybiera element <p> , który jest unikalnym dzieckiem od swojego rodzica, w tym przypadku <div> .

Demo na żywo na JSBin

Selektor: ostatniego typu

:last-of-type wybiera element, który jest ostatnim dzieckiem, określonego typu jego rodzica. W poniższym przykładzie css wybiera ostatni akapit i ostatni nagłówek 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