Селекторы

CSS 2.1 Selectors
CSS 3 Selectors
30 CSS- селекторов, которые вы должны запомнить - примеры использования атрибутов и Шпаргалка RegExp: Метасимволы, Максимализм квантификатора, Алфавиты и блоки.
Селекторы jQuery

Селекторы Основы работы с CSS, jQuery. Селекторами называют специальным образом записанные выражения, позволяющие применить правила форматирования некоторой группе элементов web-страницы:

селектор {
   свойство: значение;
 }

Правила форматирования в фигурных скобках записываются с использованием того же синтаксиса, что и при использовании атрибута style. Огромным преимуществом такого подхода по сравнению с внедренными стилями является возможность форматирования сразу группы элементов, имена и атрибуты которых удовлетворяют заданным условиям.

Чувствительность к регистру имён элементов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML - чувствительны к регистру.

Для обозначения универсального селектора применяется символ звездочки (*), который означает, что данное правило будет применяться вообще к любому Html тегу в коде. В общем случае синтаксис следующий

* { Описание правил стиля }

Пример. Выбор цвета, шрифта и размера текста для всех элементов документа. Аналогичный результат можно получить, если в данном примере поменять селектор * на body.

<html>
 <head>
  <title>Универсальный селектор</title>
  <style type="text/css">
   * {
    color:black; / *Цвет текста по умолчанию */
    font-family: Aral, Verdana, sans-serif; /* Рубленый шрифт для текста */
    font-size: 96%; /* Размер текста */
   }
   </style>
</head>
 <body>

Многие разработчики используют его для того, чтобы сбросить у всех элементов значения margin и padding

* { margin: 0; padding: 0; }

Также * можно использовать для выделения дочерних элементов. Например выделить все дочерние элементы #main.

#main * { border: 2px solid black; }

Одним из наиболее распространенных селекторов является селектор элемента или тип элемента:

h1 {
    font-size: 14pt;
    color: #660000;
}										   
p {
    text-align: justify;
}

В данном примере используется стиль для заголовков 1го уровня и абзацев документа. Как можно видеть в коде примера, абзацы не содержат выравнивания, однако их содержимое выравнивается по ширине, как то задает стиль для селектора p.

Классы применяются, когда необходимо задать разные стили для одного тега или просто определить стиль для элемента веб-страницы. При использовании совместно с тегами синтаксис для классов будет следующий:

Элемент.КЛАСС { Правила стиля ... }

Используется класс стиля путем указания атрибута class с заданным значением у элементов заданного типа. К примеру, если класс и именем "с1" создан для абзаца (элемент "p"), то его нельзя использовать для форматирования, к примеру, заголовков.

Листинг: Использование классов стиля

p { /* стиль обычного абзаца */
    text-align: justify;
}				 
p.cite { /* создание класса альтернативного стиля абзаца */
    text-align: justify;
    font-style: italic;
    font-sise: 8pt;
    color: #999999;
}			   
 
...
<!-- использование класса -->
<p class="cite">Селекторами называют ... </p>

Существует так же возможность создать класс стиля не привязанный к конкретному типу элемента. При создании такого стиля просто не указывайте тип элемента, к которому его можно применить:

.КЛАСС { Правила стиля ... }

Таким образом, класс получится универсальным и может быть применен с одинаковым успехом как для абзацев, так и для заголовков и для остальных текстовых элементов страницы.

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

<div class="a b c">
Блок с 3-я классами</div>

Атрибут ID задает уникальное имя элемента, которое используется для изменения его стиля. Для назначения стиля элементу с заданным ID используется следующий синтаксис:

#идентификатор { правила форматирования }

После этого любой элемент, имеющий заданный ID примет указанные свойства форматирования. Ограничение состоит в том, что в любом XHTML документе не должны повторятся значения атрибутов ID его элементов, то есть, должна соблюдаться уникальность идентификатора.

Пример. Применение селектора ID

/* селектор в CSS */
#copyright {
    txt-align: center;
    font-size: 10pt;
    font-weight: bold;
    color: #996633;
    border-top: 1px dashed black;
}          
 
<!-- Применение на странице -->
 
<p id="copyright">
    &copy; 2012.
</p>

Синтаксис:
```
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
```
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
Также же можно привязаться к значению атрибута и использовать "=" "~=".
```
a[rel~="copyright"] { ... }
a[href="http://www.w3.org/"] { ... }
```
Найти символы, которые могут стоять в любом месте значения этого атрибута (например, атрибуа title)
```
[title*="Вася"]{font-size:3em;color: red;}
```
На странице собраны ссылки на файлы. Нужно выбрать только файлы с расширением pdf:
```
[href$="pdf"]{
	padding:0 5px 0 20px;
	background:url(icon.png) no-repeat -32px 0;
}
```
Mozilla Селекторы атрибутов

Для оптимизации стилевых таблиц и сокращения набираемого кода часто можно использовать группирование селекторов, требующих применения одного и того же набора правил форматирования. Примером таких элементов могут служить элементы <b> и <strong> - оба они размечают текст полужирным шрифтом.

Допустим, вы желаете, чтобы текст, отмеченный одним (любым) из этих элементов был полужирным, темно-красным и имел подчеркивание. В этом случае вам придется воспользоваться следующим набором правил:

b {
    color: #660000;
    text-decoration: underline;
}
strong {
    color: #660000;
    text-decoration: underline;
}

Или воспользоваться группированием и записать предыдущие стили в более компактной форме:

b, strong {
    color: #660000;
    text-decoration: underline;
}

Оба варианта одинаково функционируют и не содержат ошибок. Однако второй вариант предпочтительнее к использованию, так как является более лаконичным и легче модифицируется при необходимости.

Группирование селекторов можно применить и в таком контексте: допустим, необходимо задать заголовкам всех уровней одинаковые свойства font-family, text-align и color и сделать их отличающимися только размерами текста:

/* Общие свойства */
h1, h2, h3, h4, h5, h6 {
    font-family: Tahoma;
    text-align: Center;
    color: navy;
}              
 
/* Индивидуальные свойства */
h1 { font-size: 18pt; }
h2 { font-size: 16pt; }
h3 { font-size: 14pt; }

Селекторы по иерархии, или контекстные селекторы, позволяют задавать правила оформления элементов, с учетом их места в общей иерархии элементов страницы, то есть - с учетом контекста. Так, например, можно по разному представлять обыкновенные абзацы и абзацы, вложенные в ячейки таблицы, простые гиперссылки и гиперссылки основного меню страницы и т.д.

При этом, не играет никакой роли, является ли элемент прямым потомком родителя или же нет. При создани контекстных селекторов, родительские селекторы перечисляются, разделяясь пробелом, от родителей к потомкам.

Пример оформления абзаца, вложенного в ячейку таблицы:
```
td p {
    color: #660000;
}
```
Наиболее наглядным примером применения контекстных селекторов является создание правил автоматической нумерации многоуровневых упорядоченных списков.

Соседние селекторы
```
b + i { color:red }
```
Дочерние селекторы
```
div > p { color:red }
```

Селектор атрибута

p[align] { color:red }
p[align="right"] { color:green }
p[align~="right"] { color:green }
div[lang|="en"] { color:red }

Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. Синтаксис использования псевдоклассов следующий:

селектор:псевдокласс { property: value; }

Существуют следующие псевдоклассы:

active - Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши.
link - Непосещенная ссылка.
hover - Ссылка при наведенном курсоре мыши.
focus
visited - Посещенная ссылка.
first-letter - Определяет стиль для первого символа текстового блока.
first-line - Устанавливает стиль для первой строки текстового блока.
after
before

Первые 4 псевдокласса применяются исключительно к гиперссылкам и задают формат гиперссылки в зависимости от ее состояния. Последующие 2 - к любому текстовому блоку.

Использование псевдоклассов для гиперссылок позволяет добиться довольно интересных эффектов. Таких, например, как создание ролловеров. Для этого можно задействовать стиль для класса элемента <a> и его псевдокласса hover:

Листинг: Псевдоклассы гиперссылок

/* Стилевые правила */
a.rollover {
    color: #660000;
    text-decoration: none;
}                         
a.rollover:hover {
    color: #FF0000;
    text-decoration: underline;
}                           
 
<!-- Применение в HTML -->
 
<a class="rollover" href="#">Ссылка-ролловер</a><br />
<a href="#">Обычная гиперссылка</a> <br />

Листинг: Unicode символы как иконки

        <style>
            .icon-test:before { content: "♒ "; }
            .icon-test:after { content: " \2652"; }
        </style>
    </head>
    <body>
        <span class="icon-test">Aquarius</span><button>&#x2652; &#9810;</button>

p:first-letter{
	font-size:5em;
	color:#d30;
}
p:first-line{
	font-size:2em;
	color:#69c;
}
 
p:before{
	content:"Начало параграфа ";
	font-size:3em;
	color:#f30;
}
p:after{
	content:" Окончание параграфа";
	font-size:3em;
	color:#69c;
}
a:after{
	content:" [" attr(href) "]";
}

Селекторы служат для отбора элементов DOM. jQuery полностью совместима со спецификацией Основы работы с CSS3. jQuery не зависит от реализации CSS в браузере, если в нем нет корректной реализации селекторов CSS jQuery все равно будет отбирать элементы в соответствии с правилами W3C.

jQuery позволяет объединять несколько селекторов в одно выражение.

Получение элемента с id="id_wh_raw"
```
$('#id_wh_raw')
```

Выбрать содержимое всех div c одинаковым классом print_tbl, например <div class="print_tbl">. Создать новый документ с возможностью вывода на печать. Метод .html() позволяет получить содержимое только первого элемента из всех выбранных. Для получения содержимого всех выбранных элементов - используем конструкцию .each().

<script type="text/javascript"> 
    function print_table() {
        var elhtml = '';  // переменная, которая будет хранить содержимое всех выбранных элеметов
 
        $(".print_tbl").each(function(indx, element){
 
            elhtml+=$(element).html();
        });
 
        newWin=window.open('','printWindow','Toolbar=0,Location=0,Directories=0,
        Status=0,Menubar=0,Scrollbars=0,Resizable=0'); 
        newWin.document.open();
        pr1 = '<a href="javascript: window.print();">Печатать</a>'+elhtml;
        newWin.document.write(pr1); 
        newWin.document.close();
        return false;
    }
</script>

Селекторы и тег table.

Выбрать элементы по текстовому содержимому. В таблице выбрать все строки, если хотя бы одна ячейка этой строки содержит [b]
```
$("tr:contains('[b]')").css('font-weight','bold');
```

При нажатии на ячейку таблицы вывести содержимое четвертого столбца выбранной строки:

<script type="text/javascript">
    $(function() {
        $('table tr').click(function() {
            alert($('td:nth-child(4)', this).html());
        });
</script>

Селекторы

Универсальный селектор

Селектор элемента

Селектор class

Селектор ID

Селекторы атрибутов и их значений

Группирование селекторов

Селекторы по иерархии

Псевдоклассы

Селекторы псевдоэлементов

Пример. Селекторы jQuery

Пример. Селекторы и тег table