Селектор на клас - Медийното изображение - Уебсайтът се развива
Описание на селектора:
- Задачата, която трябва да изпълните, е да изберете всички елементи по име на клас (по стойността на атрибута на класа).
- Нотацията е името на класа, предшествано от точка.
- Пример за употреба:
Задайте височината на всички елементи с класа на заглавката (най-вероятно заглавката на сайта) на 200px.
Научете повече за селектора на класове
Селекторът на тип, обсъден по-рано, ви позволява да дефинирате стилове за всички едни и същи тагове. Например всички абзаци (p таг) или всички елементи от списък (li таг). Като правило, в реални условия се изисква да се задават стилове по много по-гъвкав начин - например конкретен div таг или отделен елемент от списъка. В този случай можете да използватеселектора на клас или селектора на идентификатора.
Селекторът на клас ще позволи прилагането на стилове към всички елементи с определена стойност на атрибут на класа. Разбира се, първо трябва да поставите същите тези атрибути в HTML кода.
Да кажем, че имаме следния код:
Маркирах първия елемент от списъка като активен (зададох атрибута за него). Сега нека зададем стиловете за този елемент (по-точно за всички тагове с този клас):
Всъщност този запис е стенограма за следното (току-що премахнах универсалния селектор - това е обичайна практика):
Имайте предвид, че един клас може да бъде присвоен на няколко елемента едновременно:
Като комбинирате селектор на клас и селектор на тип, можете да комбинирате техните свойства. Да предположим, че ще „озеленим“ само активните параграфи, следното правило не се прилага за други тагове:
различаващ главни от малки букви
Не забравяйте, че за разлика от имената на HTML етикети, имената на класове правят разлика между главни и малки букви. Това е, и са напълно различни класове. Така че, ако вашият селектор не е избралелементът, от който се нуждаете - първо проверете дали класът в HTML и CSS е абсолютно идентичен.
Множество класове
HTML ви позволява да зададете стойността на атрибута клас към списък с имена, разделени с интервал (редът няма значение). С други думи, един елемент може да има няколко класа едновременно:
Стиловете, принадлежащи към всеки от изброените класове, ще бъдат комбинирани, за да бъдат приложени към този елемент.
Понякога този подход е удобен, но не трябва да злоупотребявате с него. Така например използването на допълнителен активен клас често е оправдано, тъй като това ще позволи на програмиста да обработва, например, елементи, избрани от потребителя - превключватели, раздели, елементи от менюто по същия начин. Да кажем дизайна
В допълнение към комбинирането на стилове, множеството класове ни дават още една интересна възможност - да избираме елементи с дадена комбинация от класове. За целта имената на класовете в селектора се посочват последователно (без интервали). Например:
Понякога такъв финт спестява няколко реда код. Но само ако не ви е грижа за поддръжката на IE6. Да, да, за съжаление този браузър не разбира такъв запис. Той ще приложи този стил към елементите, чийто клас е посочен последен. Това е в нашия случай към елементи с активен клас. На магарето няма да му пука дали имат изскачащ клас. Така че трябва да внимавате, когато използвате селектори на множество класове.
Обхват на селектора на клас
Концепцията за класове е един от крайъгълните камъни в оформлението. Следователно селекторите на класове вероятно ще бъдат най-често срещаните във вашия CSS. Например, би било много правилно да направите страница, използвайки div тагове като контейнери, давайки им определени класове (в съответствие сфункционално предназначение):