Deerua about Coding -> Заметки с тегом «selectors»

Блог о кодинге, автор Deerua

coding, javascript, css, html, php, jquery, mysql, deerua

Deerua about Coding

 Избранное

 Самые комментируемые за всю историю

 175 заметок ненаглядно

 Архив за 2010, 2009, 2008  год


 15 октября 2009, 10:17       более 4-х месяцев назад

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

/* 
 * Дочерние селекторы
 * Выбирает все элементы, которые являются непосредственно дочерними для указанного родителя. 
 * В примере 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­;
}


 2 комментария

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

 4 декабря 2008, 11:22       более года назад

YASS: Yet Another cSS selector

Вот тут можно скачать 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 (русские комментарии)

 1 комментарий

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

Нужно создать сайт на 1С-Битрикс(Bitrix)?
Работает на движке e2 Selecta * All sources code was highlighted with w3club Highlighter.
deer.org.ua © 2008—2010 Vitaliy Bogdanets Deerua