Obrazek użytkownika cytrynek

Selektory

Treść: 

 Selektory są mechanizmem za pomocą którego możemy wybierać określony elementy w celu dokonywania na nich pewnych operacji np: zmiany stylu CSS bądź operacji na drzewie DOM (za pomocą Java Script).

Poniżej znajduje się tłumaczenie ze strony: http://www.w3schools.com/cssref/css_selectors.asp

U dołu znajduje się przykład do pobrania.

Selektor/”Zaznaczacz”

Przykład

Opis przykładu

.class

.intro

Zaznacza wszystkie elementy z klasą .intro

#id

#firstname

Zaznacza wszystkie elementy z id="firstname"

*

*

Zaznacza wszystkie elementy

element

p

Zaznacza wszystkie znaczniki <p>

element,element

div, p

Wybór kilku elementów: zaznacza <div> oraz <p> np.:

div,p {color:red}

element element

div p

Zaznacza wszystkie <p> będące w śroku wszystkich <div>

element>element

div > p

Zaznacza wszsytkie <p>, których rodzicem jest <div>. Głębiej nie sięga.

element+element

div + p

Zaznacza <p> które bezpośrednio graniczą z <div>

element1~element2

p ~ ul

Zaznacza wszystkie <ul> będące po <p>

[attribute]

[target]

Zaznacza określony atrybut (element opisujący znacznik np.: alt, title, target ...), w tym przypadku jest to atrybut target

[attribute=value]

[target=_blank]

Zaznacza element, którego atrybut target ="_blank"

[attribute~=value]

[title~=flower]

Zaznacza element, którego atrybut title zawiera w sobie "flower". Różnica w stosunku do *= polega na tym, że musi to być tylko jeden wyraz. Nie zaznaczy „red flower”, ale zaznaczy „flowers”

[attribute|=value]

[lang|=en]

Zaznacza wszystkie atrybuty rozpoczynające się od en "en"

[attribute^=value]

a[href^="https"]

Zaznacza każde <a>, którego atrybut href zaczyna się od "https"

[attribute$=value]

a[href$=".pdf"]

Zaznacza każde <a>, którego atrybut href kończy się od ".pdf"

[attribute*=value]

a[href*="zsp5kozuchow"]

Zaznacza wszystkie <a>, którego atrybut href zawiera „zsp5kozuchow”

:active

a:active

Zaznacza aktywny odnośnik

::after

p::after

Dodaje element/treść po każdym <p> np.: p::after{display:block; width:100%; height:10px; background-color:red}

Spowoduje dodanie czerwonej belki po każdym akapicie (<p>)

::before

p::before

Analogicznie do tego co wyżej ale przed.

:checked

input:checked

Zaznacza każdy, zaznaczony <input>

:disabled

input:disabled

Zaznacza każdy nieaktywny/wyłączony <input>

:empty

p:empty

Zaznacza każde <p> które nie posiada potomka, także w postaci tekstu

:enabled

input:enabled

Zaznacza każdy aktywny/włączony <input>

:first-child

p:first-child

Zaznacza każde <p>, które jest pierwszym potomkiem rodzica

::first-letter

p::first-letter

Zaznacza pierwszą literę w akapicie <p>

::first-line

p::first-line

Zaznacza pierwszą linię w akapicie <p>

:first-of-type

p:first-of-type

Zaznacza każde pierwsze<p> , które jest potomkiem <p>

:focus

input:focus

Zaznacza element <input> po kliknięciu na nie

:hover

a:hover

Zaznacza odnośnik po najechaniu na niego kursorem

:in-range

input:in-range

Wybiera element input jśli wartość wybrana lub domyślna występuje w zbiorze określonym przez min i max. np.:

<input type="number" min="5" max="10" value="7">

:invalid

input:invalid

Zaznacza pole input jeśli wartość wpisana w to pole nie jest zgodna wymaganą wartością. Np: <input type="email" value="ToJestEmail">

:lang(language)

p:lang(it)

Zaznacza, każdy element, którego atrybut lang ma wartość =it

:last-child

p:last-child

Zaznacza każde <p> które jest ostatnim potomkiem swojego rodzica

:last-of-type

p:last-of-type

Zaznacza każde ostatnie<p> , które jest potomkiem <p>

:link

a:link

Zaznacza wszsytkie nieodwiedzane linki

:not(selector)

:not(p)

Zaznacza wszystkie elementy poza <p>

:nth-child(n)

p:nth-child(2)

Zaznacza drugi akapit <p>

:nth-last-child(n)

p:nth-last-child(2)

Zaznacza drugi od końca akapit.

:nth-last-of-type(n)

p:nth-last-of-type(2)

Zaznacza drugi od końca akapit

:nth-of-type(n)

p:nth-of-type(2)

Zaznacza <p>, który jest drugim potomkiem rodzica <p> element of its parent

:only-of-type

p:only-of-type

Selects every <p> element that is the only <p> element of its parent

:only-child

p:only-child

Selects every <p> element that is the only child of its parent

:optional

input:optional

Selects input elements with no "required" attribute

:out-of-range

input:out-of-range

Selects input elements with a value outside a specified range

:read-only

input:read-only

Selects input elements with the "readonly" attribute specified

:read-write

input:read-write

Selects input elements with the "readonly" attribute NOT specified

:required

input:required

Selects input elements with the "required" attribute specified

:root

:root

Selects the document's root element

::selection

::selection

Selects the portion of an element that is selected by a user

:target

#news:target

Selects the current active #news element (clicked on a URL containing that anchor name)

:valid

input:valid

Selects all input elements with a valid value

:visited

a:visited

Selects all visited links

ZSP nr 5 im. Leszka Kołakowskiego
ZESPÓŁ SZKÓŁ PONADGIMNAZJALNYCH
NR 5 IM. LESZKA KOŁAKOWSKIEGO
W KOŻUCHOWIE

wspomagane przez open source