Основни CSS селектори

Основна част от CSS са селекторите. За да прилагаме стилове в нашата CSS страница трябва да можем да окажем за кой елемент трябва те да се отнасят.

В този урок ще разгледаме както някои по-глобални CSS селектори, така и по-конкретизирани.

Можем да използваме просто една звездичка, за да означим всички елементи:

* { margin: 0; }

Нека поясним, че margin е външно отстояние около един елемент. Тогава горният пример оказва, че всички елементи ще имат стойност 0 за този белег (property).

По подразбиране браузърите добавят такова отстояние към много от елементите. Всеки браузър обаче използва различни стойности, които водят до различен вид на страницата. Затова на много места е възможно да видите подобен reset на стиловете, за да бъде всичко уеднаквено.

CSS селектиране по име на таг

Както в предния урок вече изяснихме, стилове можем да прилагаме и към всички тагове от даден тип като просто използваме името на тага:

h1 { font-size: 32px; }
h2 { font-size: 24px; }
p { font-size: 12px; }

Според горния пример:

  • всички заглавия от тип H1 ще имат размер на шрифта 32px
  • всички H2 заглавия – 24px
  • а всички параграфи – 12px

Задаване на големина на шрифта на параграфите обаче е често срещана грешка. Ако след параграф имаме списък (примерно), неговият шрифт ще е различен. Освен, ако не сме оказали и него изрично.

Съществуват и други тагове обаче и ако трябва да задаваме големина на текста на всеки ще има да пишем доста.

За да сме сигурни, че всички тези елементи ще използват еднакъв шрифт трябва да приложим стиловете директно на <body>:

body { font-size: 12px; }

Поради факта, че абзаците се намират вътре в <body> тага те унаследяват неговите стилове. Заглавията обаче не унаследяват размера на шрифта. Затова няма да имаме проблем, ако не им зададем изрични размери.

CSS селектори по клас

Тези селектори използват class атрибута на HTML елементите. Синтаксисът на class selector-а започва с точка (за да се различи от обикновен селектор по име на таг) и продължава с името на класа:

.red { color: #F00; }

По този начин оказваме, че искаме всички елементи, които имат клас red да са с червен цвят на текста. Ако искаме да ограничим само абзаците с клас red да са червени пишем комбинация от двата селектора:

p.red { color: #F00; }

По този начин този стил ще е валиден за таг <p class="red">, но няма да е валиден за <li class="red">.

CSS селектори по id

Подобно на класовите селектори има и ID селектори, които разчитат на ID атрибута на таговете. За разлика от точка, както е при класовете, тези селектори използват диез (#):

#logo { color: #000; }

Една страница не трябва да има повече от един елемент с конкретно id. Така че подобни стилове ще се прилагат само на един елемент. Възможно е обаче този елемент да се преповтаря на различни страници. Тогава стиловете ще важат за всички тях.

Възможно е да имаме елемент с някакво ID на една страница, а на друга – същото ID да се ползва от друг елемент:

a#logo { background-image: url(logo.png);
img#logo { margin: 5px; }

В примера задаваме фоново изображение на елемента <a id="logo">, а за <img id="logo" /> задаваме външно отстояние 5px. Двата елемента може да се срещат на две отделни страници.

Имайки предвид тези селектори вече можете да пишете доста CSS.

Играта обаче коренно се променя когато включим и

каскадни стиловe

#content p { color: #000; }
#sidebar p { color: #333; }

Това са комбинации от селектори, отговарящи на вложени елементи.

С кода от последния пример задаваме:

  • цвета на текста на абзаците, които са вътрешни за елемент с id="content", да бъде черен
  • на абзаците, които са вътрешни за елемент с id="sidebar" – да са тъмносиви

Можем да влагаме неограничено много елементарни селектори, както и селектори от всеки тип.

Прилагане на еднакви стилове за различни CSS селектори

Можем да използваме по няколко селектора за една дефиниция, като отделяме селекторите със запетая:

#header h1,
#content a.external,
#sidebar .widget h3,
#footer ul.menu a {
    color: #00F;
}

С този код задаваме син цвят на текста за елементи, които отговарят на едно от следните условия:

  • заглавие от първо ниво в елемент с id="header"
  • линкове с клас external в елемент с id="content"
  • заглавия от трето ниво разположени в елемент с class="widget", които са вътрешни за елемента с id="sidebar"
  • връзки от неномериран списък с клас menu, разположен в елемент с id="footer"

До тук всичко работи дори и на Internet Explorer 6.

Следват няколко селектора, които се поддържат от версия 7 нагоре, което лично според мене е напълно достатъчно, но държа да сте предупредени, че IE6 ще се счупи, ако използвате:

CSS селектори по атрибут

a[target] { color: #F00; }

С този селектор можем да вземем само елементи, които притежават определен атрибут. В случая на линкове, които имат зададен атрибут target задаваме червен цвят.

Селекторите по атрибут могат да бъдат прилагани и при определена стойност на този атрибут:

a[target="_blank"] { color: #F00; }

Така ще имаме червени връзки, само ако имат атрибут target, и този атрибут има стойност _blank.

По подобен начин можем да зададем и:

a[class="red"] { color: #F00; }

което обаче е тъпо, тъй като това е еквивалентно на a.red. А то е по-кратко и работи на повече браузъри. Казахме, че с IE6 няма да се занимаваме, но все пак въпросът е принципен. Защо зор-зорна да го чупим нещо? Единственият смислен случай да използваме това е когато искаме елементът да има само и единствено клас red.

Съществуват и

други CSS селектори по атрибут:

  • [attribute^="start"] – ако стойността на атрибута започва със „start“ (примерно „starting“)
  • [attribute$="end"] – ако стойността на атрибута завършва с „end“ (примерно „amend“)
  • [attribute*="partial"] – ако някъде вътре в атрибута се среща „partial“ (примерно „lorempartialipsum“)

И трите селектора биха обхванали следния елемент:

<p attribute="start-partial end">Текст<p>

Атрибут attribute не съществува, но го използваме само за примера.

start и partial са разделени с тире, а partial и end – с интервал. В конкретния случай това няма никакво значение. Нямаше да има значение, ако всичко беше въведено и като една цяла дума.

Даже още повече CSS селектори по атрибут:

Ако използваме обаче [attribute~="end"] тогава ще имаме нужда съдържанието на атрибута да е отделено с интервал. Тогава пак ще селектираме същия елемент.

Можем да използваме и [attribute|="start"], което ще търси елементи, чиито attribute атрибут съдържа думата start отделена с тире. Това пак ще работи в предния случай.

След като знаем това, вече можем да кажем, че следното е наистина тъпо:

p[class~="red"] { color: #F00; }

Тъпо е, защото един елемент може да има няколко класа. Те се отделят с интервал в атрибута: <p class="big red">.

CSS селектор за няколко класа на един елемент:

.big.red { font-size: 18px; color: #F00; }

Важно да се отбележи, че можем да използваме по няколко класа като условие за даден стил.

Повече смисъл би имал следния пример:

.big { font-size: 18px; }
.red { color: #F00; }
.big.red { font-weight: bold; }

Така правим:

  • елементите с клас big да са с едър шрифт
  • тези с клас red да са червени
  • а тези, които отговарят и на двете условия, освен всичко друго, да са и удебелени (по някакви си там дизайнерски или други изисквания)

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.