Полезные селекторы в 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: solid 1px 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.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.