BLOG POČETNA
CSS
- UVOD U CSS
- CSS SELEKTORI
- CSS SVOJSTVA
  - border
    - border-radius
  - box
    - box-shadow
  - font
    - @font-face
  - text
    - text-shadow
- CSS TRIKOVI
  - Vertikalno pozicioniranje

CSS selektori

Upotreba CSS selektora

CSS selektori su modeli koji se koriste za određivanje elementa (ili elemenata) na koje želimo da primenimo neki stil.

Selektori mogu biti: identifikatori, klase, pseudo klase, regularni HTML elementi (tagovi), kontekstualni selektori, atribut selektori i još poneki... Moguće su i razne kombinacije selektora.

Klase i identifikatori

Klase i identifikatori su selektori koje sami pravimo i definišemo, dajemo ime ime koje sami određujemo. Klasa uvek počinje sa tačkom (.), a identifikator tarabom (#). Klase i identifikatori mogu egzistirati samostalno ili u kombinaciji sa drugim selektorime. Dejstvo klasa i identifikatora je istovetno, a jedina razlika je u tome što se identifikator upotrebljava samo jednom na web stranici, dok klasu možemo upotrebljavati neograničeno.

Pseudo klase

Pseudo klase uvek stoje kao nastavak nekog identifikatora. Bliže određuju igled ili ponašanje nekog selektora.

Regularni HTML elementi (tagovi)

Regularni HTML elementi (tagovi) kao selektori vrlo često se koriste i služe nam da jednostavno odredimo izgled ili ponašanje bilo kog elementa. U CSS-u oni se pišu isto kao i u HTML-u, ali bez znakova manje - veće (bez < >). Mogu se upotrebljavati samostalno ili u kombinaciji sa drugim selektorima.

Kontekstualni selektori

Ovi selektori omogućavaju da odredimo izgled ili ponašanje elemenata u zavisnosti od toga u kom kontekstu su upotrebljeni.

Selektori atributa

Selektori atributa omogućavaju nam da definišemo izgled ili ponašanje elemenata koji imaju određene atribute. Mogu postojati samostalno ili u kombinaciji sa drugim selektorima.

Ova gore navedena klasifikacija selektora možda izgleda komplikovano ili nejasno, pa ćemo za sve selektore pokušati da damo detaljnije objašnjenje sa primerima koji će, nadam se, otkloniti sve nedoumice.

Tabela selektora u CSS-u

Selektor	Primer	Opis	CSS
.class	.moja-klasa	Odnosi se na sve elemente sa tom deklarisanom klasom: class="moja-klasa"	1
#id	#neko-ime	Odnosi se na element sa tim identifikatorom: id="neko-ime"	1
*	*	Univerzalni selektor. Odnosi se na sve elemente.	2
element	p	Odnosi se na sve <p> elemente	1
element,element	div,p	Odnosi se na sve <div> elemente i sve <p> elemente	1
element element	div p	Odnosi se na sve <p> elemente unutar <div> elementa	1
element>element	div>p	Odnosi se na sve <p> elemente kojima je roditeljski element <div> element	2
element+element	div+p	Odnosi se na sve <p> elemente koji su neposredno posle <div>... </div> elementa	2
[attribute]	[target]	Odnosi se na sve elemente koji imaju target attribut	2
[attribute=value]	[target=_blank]	Odnosi se na sve elemente koji imaju target="_blank" atribut	2
[attribute~=value]	[title~=dizajn]	Odnosi se na sve elemente koji kao title attribut sadrže reč "dizajn"	2
[attribute\|=value]	[lang\|=en]	Odnosi se na sve elemente koji u lang attributu imaju vrednost "en"	2
:link	a:link	Odnosi se na sve neposećene linkove	1
:visited	a:visited	Odnosi se na sve posećene linkove	1
:active	a:active	Odnosi se na activni link	1
:hover	a:hover	Odnosi se na linkove kada je kursor miša iznad linka	1
:focus	input:focus	Odnosi se na input element kada kliknemo u input polje	2
:first-letter	p:first-letter	Odnosi se na prvo slovo svakog <p> elementa	1
:first-line	p:first-line	Odnosi se na prvi red svakog <p> elementa	1
:first-child	p:first-child	Odnosi se na svaki <p> element koji je prvo dete roditeljskog elementa	2
:before	p:before	Ubacuje sadržaj pre sadržaja svakog <p> elementa	2
:after	p:after	Ubacuje sadržaj posle svakog <p> elementa	2
:lang(language)	p:lang(it)	Odnosi se na svaki <p> element with a lang attribute equal to "it" (Italian)	2
element1~element2	p~ul	Odnosi se na svaki <ul> element that are preceded by a <p> element	3
[attribute^=value]	a[src^="https"]	Odnosi se na svaki <a> element koji src attribute value begins with "https"	3
[attribute$=value]	a[src$=".pdf"]	Odnosi se na svaki <a> element koji src attribute value ends with ".pdf"	3
[attribute=value*]	a[src*="w3schools"]	Odnosi se na svaki <a> element koji src attribute value contains substring "w3schools"	3
:first-of-type	p:first-of-type	Odnosi se na svaki <p> element koji je prvi <p> element of its parent	3
:last-of-type	p:last-of-type	Odnosi se na svaki <p> element koji je last <p> element of its parent	3
:only-of-type	p:only-of-type	Odnosi se na svaki <p> element koji je only <p> element of its parent	3
:only-child	p:only-child	Odnosi se na svaki <p> element koji je only child of its parent	3
:nth-child(n)	p:nth-child(2)	Odnosi se na svaki <p> element koji je second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Odnosi se na svaki <p> element koji je second child of its parent, counting from last child	3
:nth-of-type(n)	p:nth-of-type(2)	Odnosi se na svaki <p> element koji je second <p> element of its parent	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Odnosi se na svaki <p> element koji je drugi <p> element of its parent, counting from last child	3
:last-child	p:last-child	Odnosi se na svaki <p> element koji je poslednje dete roditeljskog elementa	3
:root	:root	Odnosi se na document’s root element	3
:empty	p:empty	Odnosi se na svaki <p> element that has no children (including text nodes)	3
:target	#news:target	Odnosi se na current active #news element (clicked on a URL containing that anchor name)	3
:enabled	input:enabled	Odnosi se na svaki enabled <input> element	3
:disabled	input:disabled	Odnosi se na svaki disabled <input> element	3
:checked	input:checked	Odnosi se na svaki checked <input> element	3
:not(selector)	:not(p)	Odnosi se na svaki element koji nije <p> element	3
::selection	::selection	Odnosi se na portion of an element koji je selected by a user	3