CSS Селекторы и наследование

Thu, 15 Oct 2009 10:17:16 +0200

/* 
 * Дочерние селекторы
 * Выбирает все элементы, которые являются непосредственно дочерними для указанного родителя. 
 * В примере body является родителем, а p — дочерним. 
 * (Для IE7+ нужно также указывать верный Doctype для правильной работы.)
 */
body>p {color: #fff;}


/*
 * Связные классы
 * Связные классы используются, когда один элемент имеет несколько классов, например так:
 * <d?v class="class1 class2 class3">
 *    <р>Какой-то текст.</р>
 * </d?v>
 */
.class1.class2.class3 {background: #fff;}


/*
 * Селекторы с атрибутами
 * Это свойство позволяет элементу быть отмеченным только в том случае, если у него 
 * присутствует указанный аттрибут. Например, в примере отмечены 
 * будут все ссылки с аттрибутом href, тогда как для всех остальных данное свойство 
 * применено не будет.
 */
 a[href] {color: #0f0;}


/*
 * Смежные соседние селекторы
 * Этот селектор определяет свойства элементов, смежных и следующих сразу 
 * определенным селектором. Например, в коде ниже
 * <Н1>Заголовок</Н1>
 *    <р>Какой-нибудь текст.</р>
 *    <р>Какой-нибудь другой текст.</р>
 * свойства CSS будут применены только к первому абзацу.
 */
 h1+p {color: #f00;}


/*
 * Общие соседние селекторы
 * Определяет свойства для всех соседних элементов, следующих за определенным селектором. 
 * Например, если воспользоваться примером, то данное свойство распространится 
 * и на первый, и на второй абзацы. Заметим, что если бы абзац шел перед заголовком, 
 * то данное свойство на него не распространялось бы.
 */
 h1~p {color: #f00;}

PS: Бонус трек: заменяем onfocus=blur() с помощью css

a:active{
  outline:none;
}

Посмотреть табличку супорта селекторов в разных браузерах

Комментарии к заметке

Теги:
css > selectors
шпаргалка

YASS: Yet Another cSS selector

Thu, 04 Dec 2008 11:22:22 +0200

Вот тут можно скачать YASS, который поможет быстрее всех выбрать все нужные DOM элементы по маске!
как использовать? :) всё просто:

_('a.link'); // выбрать все теги <a> с class="link"
_('.link span'); //выбрать все теги <span> внутри тега с class="link"
_('p'); //выбрать все теги <p>
_('#p'); //выбрать все теги с id="p" 
_('#p .link'); //выбрать все теги с class="link" внутри тега с id="p"
_('#p #sp1'); //выбрать все теги с id="sp1" внутри тега с id="p"
_('p#p'); //выбрать все теги <p> с id="p"
_('p a'); //выбрать все теги <a> внутри тега <p>
_('.link'); //выбрать все теги с class="link"
_('.link #sp1'); //выбрать все теги с id="sp1" внутри тегов с class="link"
_('img'); //выбрать все теги <img>
_('body p img'); //выбрать все теги <img> внутри тега <p>, что внутри <body>
_('a, img'); // выбрать все теги <a> и <img>

скачать 0.1ю версию для ознакомления с принципом работы 6Kb (русские комментарии)

Комментарии к заметке

Теги:
javascript > framework > yass
css > selectors
html > w3c > DOM

Deerua about Coding: последние заметки с тегом «selectors»

CSS Селекторы и наследование

YASS: Yet Another cSS selector