Selektory v CSS (časť prvá)

Pozrieme sa na zub selektorom, pseudotriedam, pseudoelementom ako v CSS2 tak v CSS3.

*

Asi najznámejší selektor zo všetkých. Symbol "hviezdy" ovplyvní každý jeden element na stránke.

* {
	margin: 0; 
	padding: 0; 
	border: 0;
}

Selektor je možné použiť i v mieste dieťaťa, kde ovplyvní všetky prvky spadajúce pod rodiča.

.content * {
	text-align: center;
}

#XYZ

Pomocou hash tagu môžeme pristupovať k elementom s id. Element s príslušním id sa môže na aktuálnej stránke vyskytovať práve raz. Pred použitím tohoto selektoru skúste zvážiť, či k danému elementu neexistuje iná cesta.

#page-container { 
	background: #ffffff; 
	margin: 0 auto;
	width: 1020px; 
	overflow: hidden;
}

.XYZ

Bodka indikuje triedový selektor. Narozdiel od id selektorov može byť na stránke použitý viackrát. Hlavné využitie nájde v stylovaní skupiny elementov.

.cols-2 { 
	width: 100%; 
	margin: 0; 
	padding: 0;
}

XYZ

V prípade, že potrebujete ostylovať konkrétny element na celej stránke môžete využiť typový/tagový selektor.

strong { 
	color: #1a962e; 
}

XYZ ABC

Asi najbežnejšim selektorom je nasledovník. Zabere na všetky elementy ABC, ktoré sa nahádzajú vo vnútri elementu XYZ.

V prípade, že Váš kód obsahuje skladbu A B C D E F G.note, tak nebude všetko tak úplne kosher. (článok)

ul li { 
	padding-left: 11px; 
	margin-bottom: 4px;
	line-height: 18px; 
}

ABC + XYZ

Jeden z príbuzenských selektorov. Aplikuje sa na XYZ element, ktorý má príbuzného/suseda ABC (nasleduje po ňom bezprostredne).

h2 + p { 
	color: #ff7900;
}

ABC ~ XYZ

Tento selektor je veľmi podobný + selektoru, ale nie je až tak prísny. Aplikuje sa na všetky elementy XYZ, ktoré následujú po ABC

h2 ~ p { 
	color: #ff7900;
}

V pokračovaní sa pozrieme na atribútové selektory.

Článek obsahuje 1 komentář

  • P.

    1
    http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

    aneb proc to prepisovat na 4 clanky