renovations
This commit is contained in:
Ilya Kantor
parent
dceccedb58
commit
6ac9e3a500
182 changed files with 275 additions and 324 deletions
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
|
||||
|
||||
<script>
|
||||
// тестовая функция для селекторов
|
||||
// проверяет, чтобы элементов по селектору selector было ровно count
|
||||
function test(selector, count) {
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
|
||||
if (!ok) alert(selector+": " + elems.length + " != " + count);
|
||||
}
|
||||
|
||||
// ------------- селекторы --------------
|
||||
|
||||
// Выбрать input типа checkbox
|
||||
test('input[type="checkbox"]', 1);
|
||||
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('input[type="checkbox"]:not(:checked)', 1);
|
||||
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('[id|="message"]', 6);
|
||||
|
||||
// Найти все элементы с id=message-*
|
||||
test('[id^="message-"]', 5);
|
||||
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('a[href$=".zip"]', 1);
|
||||
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('[data-action~="delete"]', 2);
|
||||
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержащит delete в списке (через пробел)
|
||||
test('[data-action]:not([data-action~="delete"])', 1);
|
||||
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('#messages li:nth-child(2n)', 3);
|
||||
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title + *', 1);
|
||||
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title ~ a', 2);
|
||||
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('#messages li:last-child a', 1);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
|
||||
```html
|
||||
<!--+ src="index.html" -->
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
<body>
|
||||
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Функция test(selector, count) находит элементы по селектору
|
||||
* и сравнивает их число с count.
|
||||
*
|
||||
* Иными словами, вызовы ниже проверяют,
|
||||
* что число элементов по селектору - правильное
|
||||
**/
|
||||
test('input', 3); // далее вместо '...' вставьте правильные селекторы
|
||||
|
||||
// Выбрать input типа checkbox
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('...', 1);
|
||||
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('...', 6);
|
||||
|
||||
// Найти все элементы с id=message-*
|
||||
test('...', 5);
|
||||
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('...', 1);
|
||||
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('...', 2);
|
||||
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержит delete в списке (через пробел)
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('...', 3);
|
||||
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 2);
|
||||
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('...', 1);
|
||||
|
||||
|
||||
function test(selector, count) {
|
||||
if (selector === '...') return;
|
||||
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
|
||||
if (!ok) alert(selector+": " + elems.length + " != " + count);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
# Выберите элементы селектором
|
||||
|
||||
[importance 5]
|
||||
|
||||
HTML-документ:
|
||||
|
||||
```html
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
```
|
||||
|
||||
Задания:
|
||||
<ol>
|
||||
<li>Выбрать `input` типа `checkbox`.</li>
|
||||
<li>Выбрать `input` типа `checkbox`, НЕ отмеченный.</li>
|
||||
<li>Найти все элементы с `id=message` или `message-*`.</li>
|
||||
<li>Найти все элементы с `id=message-*`.</li>
|
||||
<li>Найти все ссылки с расширением `href="...zip"`.</li>
|
||||
<li>Найти все элементы с атрибутом `data-action`, содержащим `delete` в списке (через пробел).</li>
|
||||
<li>Найти все элементы, у которых ЕСТЬ атрибут `data-action`, но он НЕ содержит `delete` в списке (через пробел).</li>
|
||||
<li>Выбрать все чётные элементы списка `#messages`.</li>
|
||||
<li>Выбрать один элемент сразу за заголовком `h3#widget-title` на том же уровне вложенности.</li>
|
||||
<li>Выбрать все ссылки, следующие за заголовком `h3#widget-title` на том же уровне вложенности.</li>
|
||||
<li>Выбрать ссылку внутри последнего элемента списка `#messages`.</li>
|
||||
</ol>
|
||||
|
||||
[edit src="source"]Исходный документ с вспомогательной функцией `test` для проверки[/edit]
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# Выбор элементов
|
||||
|
||||
Для выбора элементов, начиная с первого, можно использовать селектор [nth-child](http://css-tricks.ru/Articles/Details/HowNthChildWorks).
|
||||
|
||||
Его вид: `li:nth-child(n+2)`, т.к. `n` идёт от нуля, соответственно первым будет второй элемент (`n=0`), что нам и нужно.
|
||||
|
||||
# Решение
|
||||
|
||||
Отступ, размером в одну строку, при `line-height: 1.5` -- это `1.5em`.
|
||||
|
||||
Правило:
|
||||
|
||||
```css
|
||||
li:nth-child(n+2) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
```
|
||||
|
||||
Полный код [edit src="solution"]в песочнице[/edit].
|
||||
|
||||
# Ещё решение
|
||||
|
||||
Ещё один вариант селектора: `li + li`
|
||||
|
||||
```css
|
||||
li + li {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(n+2) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
# Отступ между элементами, размер одна строка
|
||||
|
||||
[importance 4]
|
||||
|
||||
Есть список `UL/LI`.
|
||||
|
||||
```html
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
```
|
||||
|
||||
Размеры шрифта и строки заданы стилем:
|
||||
|
||||
```css
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
```
|
||||
|
||||
**Сделайте, чтобы между элементами был вертикальный отступ.**
|
||||
<ul>
|
||||
<li>Размер отступа: ровно 1 строка.</li>
|
||||
<li>Нужно добавить только одно правило CSS с одним псевдоселектором, можно использовать CSS3.</li>
|
||||
<li>Не должно быть лишних отступов сверху и снизу списка.</li>
|
||||
</ul>
|
||||
|
||||
Результат:
|
||||
[iframe src="solution" border=1 link]
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
# Селектор
|
||||
|
||||
Для отступа между парами, то есть перед каждым нечётным элементом, можно использовать селектор [nth-child](http://css-tricks.ru/Articles/Details/HowNthChildWorks).
|
||||
|
||||
Селектор будет `li:nth-child(odd)`, к нему нужно ещё добавить отсечение первого элемента: `li:nth-child(odd):not(:first-child)`.
|
||||
|
||||
Можно поступить и по-другому: `li:nth-child(2n+3)` выберет все элементы для `n=0,1,2...`, то есть 3й, 5й и далее, те же, что и предыдущий селектор. Немного менее очевидно, зато короче.
|
||||
|
||||
# Правило
|
||||
|
||||
Отступ, размером в одну строку, при `line-height: 1.5` -- это `1.5em`.
|
||||
|
||||
Поставим отступ перед каждым *нечётным* элементом, кроме первого:
|
||||
|
||||
```css
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
```
|
||||
|
||||
Получится так:
|
||||
|
||||
```html
|
||||
<!--+ run src="index.html" -->
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
37
8-css-for-js/15-css-selectors/3-margin-between-pairs/task.md
Normal file
37
8-css-for-js/15-css-selectors/3-margin-between-pairs/task.md
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
# Отступ между парами, размером со строку
|
||||
|
||||
[importance 4]
|
||||
|
||||
Есть список `UL/LI`.
|
||||
|
||||
```html
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
```
|
||||
|
||||
Размеры шрифта и строки заданы стилем:
|
||||
|
||||
```css
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
```
|
||||
|
||||
**Сделайте, чтобы между каждой парой элементов был вертикальный отступ.**
|
||||
<ul>
|
||||
<li>Размер отступа: ровно 1 строка.</li>
|
||||
<li>Нужно добавить только одно правило CSS, можно использовать CSS3.</li>
|
||||
<li>Не должно быть лишних отступов сверху и снизу списка.</li>
|
||||
</ul>
|
||||
|
||||
Результат:
|
||||
[iframe src="solution" border=1 link]
|
||||
|
||||
255
8-css-for-js/15-css-selectors/article.md
Normal file
255
8-css-for-js/15-css-selectors/article.md
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
# Знаете ли вы селекторы?
|
||||
|
||||
CSS3-селекторы -- фундаментально полезная вещь.
|
||||
|
||||
Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.
|
||||
|
||||
Поэтому эти селекторы необходимо знать.
|
||||
[cut]
|
||||
|
||||
## Основные виды селекторов
|
||||
|
||||
Основных видов селекторов всего несколько:
|
||||
|
||||
<ul>
|
||||
<li>`*` -- любые элементы.</li>
|
||||
<li>`div` -- элементы с таким тегом.</li>
|
||||
<li>`#id` -- элемент с данным `id`.</li>
|
||||
<li>`.class` -- элементы с таким классом.</li>
|
||||
<li>`[name="value"]` -- селекторы на атрибут (см. далее).</li>
|
||||
<li>`:visited` -- "псевдоклассы", остальные разные условия на элемент (см. далее).</li>
|
||||
</ul>
|
||||
|
||||
**Селекторы можно комбинировать, записывая последовательно, без пробела:**
|
||||
|
||||
<ul>
|
||||
<li>`.c1.c2` -- элементы одновременно с двумя классами `c1` и `c2`</li>
|
||||
<li>`a#id.c1.c2:visited` -- элемент `a` с данным `id`, классами `c1` и `c2`, и псевдоклассом `visited`</li>
|
||||
</ul>
|
||||
|
||||
## Отношения
|
||||
|
||||
В CSS3 предусмотрено четыре вида отношений между элементами.
|
||||
|
||||
Самые известные вы наверняка знаете:
|
||||
<ul>
|
||||
<li>`div p` -- элементы `p`, являющиеся потомками `div`.</li>
|
||||
<li>`div > p` -- только непосредственные потомки</li>
|
||||
</ul>
|
||||
|
||||
Есть и два более редких:
|
||||
<ul>
|
||||
<li>`div ~ p` -- правые соседи: все `p` на том же уровне вложенности, которые идут после `div`.</li>
|
||||
<li>`div + p` -- первый правый сосед: `p` на том же уровне вложенности, который идёт сразу после `div` (если есть).</li>
|
||||
</ul>
|
||||
|
||||
Посмотрим их на примере HTML:
|
||||
|
||||
```html
|
||||
<h3>Балтославянские языки</h3>
|
||||
|
||||
<ol id="languages">
|
||||
...Вложенный OL/LI список языков...
|
||||
</ol>
|
||||
```
|
||||
|
||||
CSS-селекторы:
|
||||
|
||||
```css
|
||||
##languages li {
|
||||
color: brown; /* потомки #languages, подходящие под селектор LI */
|
||||
}
|
||||
|
||||
##languages > li {
|
||||
color: black; /* первый уровень детей #languages подходящих под LI */
|
||||
}
|
||||
|
||||
##e-slavic { font-style: italic; }
|
||||
|
||||
*!*
|
||||
##e-slavic ~ li { /* правые соседи #e-slavic с селектором LI */
|
||||
color: red;
|
||||
}
|
||||
*/!*
|
||||
|
||||
##latvian {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
##latvian * { /* потомки #latvian, подходяще под * (т.е. любые) */
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
*!*
|
||||
##latvian + li { /* первый правый сосед #latvian с селектором LI */
|
||||
color: green;
|
||||
}
|
||||
*/!*
|
||||
```
|
||||
|
||||
Результат:
|
||||
[iframe src="relation" border="1" edit link]
|
||||
|
||||
|
||||
## Фильтр по месту среди соседей
|
||||
|
||||
При выборе элемента можно указать его место среди соседей.
|
||||
|
||||
Список псевдоклассов для этого:
|
||||
|
||||
<ul>
|
||||
<li>`:first-child` -- первый потомок своего родителя.</li>
|
||||
<li>`:last-child` -- последний потомок своего родителя.</li>
|
||||
<li>`:only-child` -- единственный потомок своего родителя, соседних элементов нет.</li>
|
||||
<li>`:nth-child(a)` -- потомок номер `a` своего родителя, например `:nth-child(2)` -- второй потомок. Нумерация начинается с `1`.</li>
|
||||
<li>`:nth-child(an+b)` -- расширение предыдущего селектора через указание номера потомка формулой, где `a,b` -- константы, а под `n` подразумевается любое целое число.
|
||||
|
||||
Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо `n`. Например:
|
||||
<ul>
|
||||
<li>`:nth-child(2n)` даст элементы номер `2`, `4`, `6`..., то есть чётные.</li>
|
||||
<li>`:nth-child(2n+1)` даст элементы номер `1`, `3`..., то есть нечётные.</li>
|
||||
<li>`:nth-child(3n+2)` даст элементы номер `2`, `5`, `8` и так далее.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Пример использования для выделения в списке:
|
||||
[iframe src="nthchild" border="1" edit link]
|
||||
|
||||
```css
|
||||
/*+ hide="CSS к примеру выше" */
|
||||
li:nth-child(2n) { /* чётные */
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
li:nth-child(3) { /* 3-ий потомок */
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
<ul>
|
||||
<li>`:nth-last-child(a)`, `:nth-last-child(an+b)` -- то же самое, но отсчёт начинается с конца, например `:nth-last-child(2)` -- второй элемент с конца.</li>
|
||||
</ul>
|
||||
|
||||
## Фильтр по месту среди соседей с тем же тегом
|
||||
|
||||
Есть аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом:
|
||||
|
||||
<ul>
|
||||
<li>`:first-of-type`</li>
|
||||
<li>`:last-of-type`</li>
|
||||
<li>`:only-of-type`</li>
|
||||
<li>`:nth-of-type`</li>
|
||||
<li>`:nth-last-of-type`</li>
|
||||
</ul>
|
||||
|
||||
Они имеют в точности тот же смысл, что и обычные `:first-child`, `:last-child` и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр.
|
||||
|
||||
Пример использования для раскраски списка `DT` "через один" и предпоследнего `DD`:
|
||||
|
||||
[iframe src="nthchild-type" border="1" edit link]
|
||||
|
||||
```css
|
||||
/*+ hide="CSS к примеру выше" */
|
||||
dt:nth-of-type(2n) {
|
||||
/* чётные dt (соседи с другими тегами игнорируются) */
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
dd:nth-last-of-type(2) {
|
||||
/* второй dd снизу */
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
Как видим, селектор `dt:nth-of-type(2n)` выбрал каждый второй элемент `dt`, причём другие элементы (`dd`) в подсчётах не участвовали.
|
||||
|
||||
## Селекторы атрибутов
|
||||
|
||||
<dl>
|
||||
<dt>На атрибут целиком</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>`[attr]` -- атрибут установлен,</li>
|
||||
<li>`[attr="val"]` -- атрибут равен `val`.</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dt>На начало атрибута</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>`[attr^="val"]` -- атрибут начинается с `val`, например `"value"`.</li>
|
||||
<li>`[attr|="val"]` -- атрибут равен `val` *или* начинается с `val-`, например равен `"val-1"`.</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dt>На содержание</dd>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>`[attr*="val"]` -- атрибут содержит подстроку `val`, например равен `"myvalue"`.</li>
|
||||
<li>`[attr~="val"]` -- атрибут содержит `val` как одно из значений через пробел.
|
||||
Например: `[attr~="delete"]` верно для `"edit delete"` и неверно для `"undelete"` или `"no-delete"`.</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dt>На конец атрибута</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>`[attr$="val"]` -- атрибут заканчивается на `val`, например равен `"myval"`.</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
## Другие псевдоклассы
|
||||
|
||||
<ul>
|
||||
<li>`:not(селектор)` -- все, кроме подходящих под селектор.</li>
|
||||
<li>`:focus` -- в фокусе.</li>
|
||||
<li>`:hover` -- под мышью.</li>
|
||||
<li>`:empty` -- без детей (даже без текстовых).</li>
|
||||
<li>`:checked`, `:disabled`, `:enabled` -- состояния `INPUT`.</li>
|
||||
<li>`:target` -- этот фильтр сработает для элемента, `ID` которого совпадает с анкором `#...` текущего URL.
|
||||
|
||||
Например, если на странице есть элемент с `id="intro"`, то правило `:target { color: red }` подсветит его в том случае, если текущий URL имеет вид `http://...#intro`.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Псевдоэлементы ::before, ::after
|
||||
|
||||
"Псевдоэлементы" -- различные вспомогательные элементы, которые браузер записывает или может записать в документ.
|
||||
|
||||
При помощи *псевдоэлементов* `::before` и `::after` можно добавлять содержимое в начало и конец элемента:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<style>
|
||||
li::before {
|
||||
content: " [[ ";
|
||||
}
|
||||
|
||||
li::after {
|
||||
content: " ]] ";
|
||||
}
|
||||
</style>
|
||||
|
||||
Обратите внимание: содержимое добавляется <b>внутрь</b> LI.
|
||||
|
||||
<ul>
|
||||
<li>Первый элемент</li>
|
||||
<li>Второй элемент</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Псевдоэлементы `::before`/`::after` добавили содержимое в начало и конец каждого `LI`.
|
||||
|
||||
[smart header="`:before` или `::before`?"]
|
||||
Когда-то все браузеры реализовали эти псевдоэлементы с одним двоеточием: `:after/:before`.
|
||||
|
||||
Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно.
|
||||
|
||||
Поэтому если вам важна поддержка IE8, то имеет смысл использовать одно двоеточие.
|
||||
|
||||
Версии IE7- не понимают этих селекторов.
|
||||
[/smart]
|
||||
|
||||
## Практика
|
||||
|
||||
Вы можете использовать информацию выше как справочную для решения задач ниже, которые уже реально покажут, владеете вы CSS-селекторами или нет.
|
||||
|
||||
38
8-css-for-js/15-css-selectors/nthchild-type.view/index.html
Normal file
38
8-css-for-js/15-css-selectors/nthchild-type.view/index.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
dt:nth-of-type(2n) {
|
||||
/* чётные dt (соседи с другими тегами игнорируются) */
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
dd:nth-last-of-type(2) {
|
||||
/* второй dd снизу */
|
||||
color: red;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<dl>
|
||||
<dt>Первый dt</dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Второй dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Третий dt</dt>
|
||||
<dd>Описание dd <code>dd:nth-last-of-type(2)</code></dd>
|
||||
<dt>Четвёртый dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
8-css-for-js/15-css-selectors/nthchild.view/index.html
Normal file
32
8-css-for-js/15-css-selectors/nthchild.view/index.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
li:nth-child(2n) { /* чётные */
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
li:nth-child(3) { /* 3-ий потомок */
|
||||
color: red;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li>Древнерусский язык</li>
|
||||
<li>Древненовгородский диалект <code>li:nth-child(2n)</code></li>
|
||||
<li>Западнорусский письменный язык <code>li:nth-child(3)</code></li>
|
||||
<li>Украинский язык <code>li:nth-child(2n)</code></li>
|
||||
<li>Белорусский язык</li>
|
||||
<li>Другие языки <code>li:nth-child(2n)</code></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
59
8-css-for-js/15-css-selectors/relation.view/index.html
Normal file
59
8-css-for-js/15-css-selectors/relation.view/index.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#languages li {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#languages > li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#e-slavic { font-style: italic; }
|
||||
#e-slavic ~ li {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#latvian { font-style: italic; }
|
||||
|
||||
#latvian * { font-style: normal }
|
||||
#latvian + li {
|
||||
color: green;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Балтославянские языки</h3>
|
||||
|
||||
<ol id="languages">
|
||||
<li>Славянские языки
|
||||
<ol>
|
||||
<li>Славянские микроязыки</li>
|
||||
<li>Праславянский язык</li>
|
||||
<li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
|
||||
<li>Западнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li>Южнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li> ... <code>#e-slavic ~ li</code></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Балтийские языки
|
||||
<ol>
|
||||
<li>Литовский язык</li>
|
||||
<li id="latvian">Латышский язык <code>#latvian</code>
|
||||
<ol><li>Латгальский язык <code>#latvian *</code></li></ol>
|
||||
</li>
|
||||
<li>Прусский язык <code>#latvian + li </code></li>
|
||||
<li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue