Корисні селектори в CSS
Отже, далі я перерахую кілька CSS селекторів про яких по всій видимості більшість середньостатистичних людей, що займаються створенням сайтів, зокрема HTML версткою не знає, т. к. скільки робіт я переглянув – ще ні одного не бачив їх вживання.
Робиться речі все за аналогією з селекторами в JQuery (ну хоча скоріше навпаки).
Приклад 1. Вибираємо всі елементи на веб-сторінці ідентифікатори яких починаються з поєднання field_. Давайте обведемо їх зеленою рамкою товщиною в 1 піксель.
HTML:
<input type=”text” id=”field_1″ value=”” name=”field_name_1″/>
<input type=”text” id=”field_2″ value=”” name=”field_name_2″/>
<input type=”text” id=”field_3″ value=”” name=”field_name_3″/>
CSS:
[id^=’field_’] {
border: 1px solid green;
}
Приклад 2. Вибираємо всі елементи на веб-сторінці атрибути name у яких закінчуються (а точніше містять) на поєднання Apply. Давайте виділимо їх текст червоним кольором.
HTML:
<button type=”button” id=”field_1″ name=”button1Apply”>Застосувати</button>
<button type=”button” id=”field_2″ name=”button2Apply”>Застосувати</button>
<button type=”button” id=”field_3″ name=”button3Apply”>Застосувати</button>
CSS:
[name*=’Apply’] {
color: red;
}
Приклад 3. Вибираємо всі елементи на веб-сторінці атрибути class яких містять в собі поєднання Apply через пробіл. Давайте виділимо їх текст сірим кольором.
HTML:
<p class=”small silver text”>1</p>
<p class=”large silver message”>2</p>
<p class=”silver message”>3</p>
CSS:
[class~=’silver’] {
color: silver;
}
/* Але можна і (простіше) по-звичному: */
.silver {
color: silver;
}
* * *
На завершення підкреслю, що використання такого роду селекторів у ваших стилях є кроссбраузерным, такі інструкції розуміє навіть Internet Explorer, – перевіряв на версії 8.0.