CSS - składnia selektory

Schemat

Lista dyrektyw

selektor { 
właściwość - wartość właściwości; /* razem tworzą deklarację */
}

ang. rule set

Selector {
  property: property value; /* declaration */
}

Selektor znacznika np strong Selektor klasy poprzedzony jest kropką .

Selektor id poprzedzony jest haszem #

Selektor id nadaje priorytet regule ważniejszy od niż ten posiadający klasę, a selektor znacznika/typu ma najmniejszy priorytet.

Selektory elementów

* - każdy element/ selektor uniwersalny

e p - element "p" będący potomkiem elementu "e"

e > p - element "p" będący bezpośrednim dzieckiem elementu "e" (wnuki i pra etc. wyłączone)

e + p - element "p" bezpośrednio poprzedzony elementem "e" (rodzeństwo)

e ~ p - element "e" poprzedzany przez element "p"

Przykładowe zastosowanie

li .taskBtn ~ .taskBtn { color: white; background-color: green; }

::: wszystkie elementy będące dzieckiem elementu li poprzedzone elementem z klasą .taskBtn :::

Selektory atrybutów

e[atrybut] - element zawierający wybrany atrybut

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

<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

e[atrybut="wartość"] - element posiadający atrybut z konkretną wartością

a[target="_blank"] {
  background-color: yellow;
}

<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<a href="http://www.w3schools.com" target="_blank">w3schools.com</a>

e[atrybut~="konkretna_wartość"] - element zawierający atrybut, którego częścią jest konkretna wartość

[title~="flower"] {
  border: 5px solid yellow;
}

<img src="img_flwr.gif" title="flower" width="224" height="162">

Pełna lista

Gra selektory

http://flukeout.github.io/

Źródło i polecane linki:

https://the-awwwesomes.gitbooks.io/html-css-step-by-step/content/pl/css-advanced-selectors/index.html

https://developer.mozilla.org/pl/docs/Web/CSS/Na_pocz%C4%85tek/Selektory

https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

https://developer.mozilla.org/pl/docs/Learn/Getting_started_with_the_web/CSS_basics