«Tаблица основных CSS селекторов»
| Селектор |
Описание |
| * |
Все элементы |
| Е |
Все элементы Е |
| E F |
Все элементы F следующие за E |
| E>F |
Все элементы F, непосредственно дочерние для E |
| E+F |
Все элементы F, непосредственно предшествующие перед E, причем F и E братья. |
| E~F |
Все элементы F, предшествующие перед E, причем F и E братья. |
| E:has(F) |
Все элементы E, имеющие хотя бы один дочерний элемент F |
| E.C |
Все элементы E класса С. Для выбора всех элементов класса С используйте селектор *.С |
| E#I |
Все элементы E с идентификатором I. Для выбора всех элементов с идентификатором I используйте селектор *#I |
| E[A] |
Все элементы E с атрибутом A произвольного значения |
| E[A=V] |
Все элементы E с атрибутом A равным V |
| E[A^=V] |
Все элементы E с атрибутом A, значение которого начинается на V |
| E[A$=V] |
Все элементы E с атрибутом A, значение которого оканчивается на V |
| E[A*=V] |
Все элементы E с атрибутом A, значение которого содержит V |
«Tаблица выбора элементов по позиции в документе»
| Селектор |
Описание |
| :first |
Первый элемент на странице. |
| li a:first |
Вернет первую ссылку внутри элемента списка li. |
| :last |
Последний элемент на странице. |
| :odd |
Все нечетные элементы на странице. |
| :even |
Все четные элементы на странице. |
| :first-child |
Первый дочерний элемент. |
| li:first-child |
Вернет первый элемент каждого списка. |
| :last-child |
Последний дочерний элемент. |
| :only-child |
Возвращает элементы, имеющие по одному дочернему элементу. |
| :nth-child(n) |
Возвращает n-ый дочерний элемент. Например, li:nth-child(2) вернет второй элемент каждого списка. |
| :nth-child |
(even|odd) Четный или нечетный дочерний элемент. Например, : вернет четные элементы каждого списка. |
| :nth-child(Xn+Y) |
Возвращает дочерний элемент, порядок которого найден по формуле.
Если Y равен 0, его можно опустить. С примером станет все понятнее:
li:nth-child(3n) вернет элементы 0, 3, 6 и т.д., li:nth-child(5n+1)
вернет элементы 1,6,11 и т.д. |
| :eq(n) |
Вернет n-ый элемент. |
| :gt(n) |
Вернет элемент, стоящий после n-ого. |
| :lt(n) |
Вернет элемент, стоящий перед n-ым.
|
| Такой нюанс: селектор nth-child
начинает считать n с 1, кроме nth-child(Xn+Y), который начинает считать
n все-таки с нуля, тогда как остальные селекторы приведенные в таблице,
считают элементы с 0. |
«Tаблица таких селекторов»
| Таблица таких селекторов |
| Селектор |
Описание |
| :animated |
Выбирает элементы, с которыми производится анимация. |
| :button |
Выбирает все кнопки (input[type=submit], input[type=reset], input[type=button], или просто button). |
| :checkbox |
Выбирает все чекбоксы (input[type=checkbox]). |
| :checked |
Выбирает все отмеченные чекбоксы. |
| :contains(foo) |
Выбирает элементы, содержащие текст foo. |
| :disabled |
Выбирает все элементы со свойством disabled. |
| :enabled |
Выбирает все элементы со свойством enabled. |
| :file |
Выбирает поля загрузки файлов (input[type=file]). |
| :header |
Выбирает все заголовки (от <h1> до <h6>). |
| :hidden |
Выбирает все скрытые элементы. |
| :image |
Выбирает все input типа image (input[type=image]). |
| :input |
Выбирает элементы формы (input, select, textarea, button). |
| :not(filter) |
Выбирает элементы, обратные фильтру (об этом подробнее после таблицы). |
| :parent |
Выбирает все элементы, у которых есть не пустые дети. |
| :password |
Выбирает поля для ввода пароля (input[type=password]). |
| :radio |
Выбирает элементы radio (input[type=radio]). |
| :reset |
Выбирает кнопки сброса (input[type=reset] или button[type=reset]). |
| :selected |
Выбирает все элементы со свойством selected. |
| :submit |
Выбирает кнопки отправки формы (input[type=submit] или button[type= submit]). |
| :text |
Выбирает только текстовые поля (input[type=text]). |
| :visible |
Выбирает только видимые элементы. |
| Допускается сочетание таких селекторов |
| Таблица методов и их описание |
| Селектор |
Описание |
| children() |
Возвращает набор уникальных детей элемента.
|
| contents() |
Возвращает все дочерние узлы в наборе элементов (включая текстовые) или в содержимом документа, если он представлен как фрейм.
|
| next() |
Вернет набор всех последующих уникальных братьев элемента.
|
| nextAll() |
Вернет всех последующих братьев элемента.
|
| parent() |
Вернет уникальных прямых родителей элемента.
|
| parents() |
Вернет всех уникальных предков элементов.
|
| prev() |
Вернет набор всех предыдущих уникальных братьев элемента.
|
| prevAll() |
Вернет набор всех предыдущих братьев элемента.
|
| siblings() |
Вернет набор всех уникальных братьев элемента. |
Здесь располагается содержимое id "myTable4"