CSS 2 - Selektory

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ H ]  [ L ]  [ M ]  [ O ]  [ P ]  [ Q ]  [ R ]  [ S ]  [ T ]  [ V ]  [ W ]  [ Z ]

Metody tworzenia selektorów

Tworzenie selektorów w kaskadowych arkuszach stylów może odbywać się na wiele sposobów:

• *{...} - selektor uniwersalny zastępujący wszystkie elementy;

• p {...} - nazwa wybranego znacznika lub ich lista oddzielona przecinkami, określa styl dla wszystkich elementów ograniczonych tymi znacznikami. W tym przypadku wszystkie występujące w dokumencie paragrafy zostaną sformatowane zgodnie z podaną tu definicją;

• p a {...} - kontekstowe użycie arkusza stylów. Konstrukcja opisuje styl hiperłączy, ale tylko tych, które są zawarte pomiędzy znacznikami <p> ... </p>;

• p.klasa {...} - klasa oznacza nazwę własną, jaką można nadać elementom i umożliwia opracowanie kilku styli dla tych samych poleceń. Opisana definicja zostanie zastosowana przy wywołaniu w postaci <p class="nazwa klasy">;

• .klasa {...} - skrócona forma zapisu *.klasa. Opisana definicja może zostać zastosowana dla wszystkich znaczników HTML, np. <H1 class="nazwa klasy">;

• p#identyfikator {...} - zadaniem identyfikatora jest jednoznaczne określenie elementu na stronie. Opisana definicja zostanie przypisana paragrafowi opisanemu w nastepujący sposób: <p id="identyfikator">;

• #identyfikator {...} - identyfikator może być stosowany w połączeniu z dowolnym znacznikiem;

• p[atrybut=wartość] {...} - konstrukcja zapewniająca zastosowanie stylu wyłącznie dla elementów spełniających warunek zawarty w nawiasach. Atrybutem może być klasa, identyfikator lub dowolny inny atrybut, który może pojawić się w wywołaniu znaczników języka HTML. Operator "=" oznacza, że wartość musi być dokładnie taka sama jak w definicji stylu, by ten mógł zostać zastosowany. Dostępne są jeszcze operatory "~=" oraz "|=". Pierwszy oznacza, że przynajmniej jedna z wartości oddzielonych spacjami musi być równa wartości z definicji stylu. W drugim przypadku lista wartości oddzielona jest myślnikami;

• a:pseudoklasa {...} - pseudoklasy to obiekty powstałe w celu opisania pewnej interaktywności pomiędzy stroną a użytkownikiem. Należą do nich:

• link: definiowanie właściwości hiperłączy;
• visited: definiowanie właściwości hiperłączy już odwiedzonych stron;
• active: definiowanie właściwości aktywnych hiperłączy;
• hover: definiowanie właściwości hiperłączy nad którymi znajduje się wskaźnik myszki;
• focus: definiowanie właściwości elementów wybranych przez użytkownika;
• lang: definiowanie właściwości elementów którym nadano definicję języka;
• first-child: definiowanie właściwości elementów będących dziećmi innych elementów;

• p:pseudoelement {...} - Do grupy pseudoelementów należą:

• first-line: pozwala na zdefiniowanie właściwości pierwszej linii elementu blokowego np. paragrafu;

• first-letter: pozwala na zdefiniowanie właściwości pierwszej litery akapitu;

• before, after: pozwala na dodanie tekstu przed lub po wystąpieniu elementu;

• p>a {...} - konstrukcja umożliwiająca definiowanie właściwości hiperłączy, ale tylko tych, które są dziećmi paragrafu;

• p+a {...} - konstrukcja umożliwiająca definiowanie właściwości hiperłączy, ale tylko tych, które są na tym samym poziomie co paragraf i dodatkowo są jego bezpośrednimi następcami.

     W kaskadach styli, gdzie zachodzi konieczność wymuszenia ważniejszych styli niż wynikałoby to z ich układu, stosowana jest dyrektywa !important. Dyrektywa ta definiuje ważniejszą deklarację styli, unieważniającą pozostałe w przypadku gdy jest ich więcej.

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ H ]  [ L ]  [ M ]  [ O ]  [ P ]  [ Q ]  [ R ]  [ S ]  [ T ]  [ V ]  [ W ]  [ Z ]