автордың кітабын онлайн тегін оқу Наглядный CSS
Переводчик С. Черников
Литературные редакторы Н. Гринчик, Н. Хлебина
Художник В. Мостипан
Корректоры Е. Павлович, Е. Рафалюк-Бузовская
Грег Сидельников
Наглядный CSS. — СПб.: Питер, 2021.
ISBN 978-5-4461-1618-8
© ООО Издательство "Питер", 2021
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
1. Свойства и значения CSS
На 1 июня 2018 года CSS содержал 415 уникальных свойств, относящихся к объекту style в любом элементе браузера Chrome. По состоянию на 21 декабря 2018 года насчитывалось 522 уникальных свойства. Всего за семь месяцев в Chrome была добавлена поддержка более 100 новых свойств. Это будет происходить постоянно, так как спецификация CSS продолжает развиваться.
Сколько свойств доступно в вашем браузере на сегодняшний день? Вы можете проверить это самостоятельно с помощью простого фрагмента кода JavaScript.
001 // Создание нового HTML-элемента
002 let element = document.createElement("div");
003
004 let p = 0; // Создание счетчика
005 for (index in element.style)
006 p++;
007
008 // Выводит 522 в Chrome по состоянию на 21 декабря 2018 года
009 console.log( p );
Для просмотра всех доступных в вашем браузере свойств CSS запустите данный код JavaScript (быстрее всего проверить CSS и JavaScript можно с помощью codepen.io). Результаты могут различаться для разных браузеров и версий.
В процессе создания книги все свойства были распечатаны и упорядочены по основным категориям (положение, размерность, разметка, CSS-анимация и т.д.). Затем для каждого свойства, которое каким-то важным образом отображает или изменяет визуальный вывод, была создана схема с кратким описанием названия и значения.
Здесь не описаны редко используемые свойства CSS (или те, которые на момент написания книги не имели полной поддержки основных браузеров). Они бы только все запутали.
Мы сосредоточимся только на свойствах, которые в настоящее время широко применяются веб-дизайнерами и разработчиками. Много усилий было уделено созданию схем grid- и flex-верстки. Помимо этого, я включил краткое руководство по SASS/SCSS, но выбрал только наиболее важные функции, о которых вы должны знать.
1.1. Внешнее размещение
Код CSS можно сохранить в отдельном внешнем файле (например, style.css) и включить с помощью HTML-элемента link.
Исходный код файла style.css:
001 body p
002 {
003 background: white;
004 color: black;
005 font-family: Arial, sans-serif;
006 font-size: 16px;
007 line-height: 1.58;
008 text-rendering: optimizeLegibility;
009 -webkit-font-smoothing: antialiased;
010 }
Пример ссылки на внешний CSS-файл:
001 <html>
002 <head>
003 <title>Добро пожаловать на сайт.</title>
004 <link rel = "stylesheet"
005 type = "text/css"
006 href = "style.css" />
007 </head>
008 <body>
009 <p>CSS-стили записаны в файле style.css
010 и применяются к содержимому этой страницы.</p>
011 </body>
012 </html>
1.2. Внутреннее размещение
Вы можете ввести CSS-код непосредственно в HTML-документ между двумя тегами элемента style:
001 <html>
002 <head>
003 <style type = "text/css">
004 body p
005 {
006 background: white;
007 color: black;
008 font-family: Arial, sans-serif;
009 font-size: 16px;
010 line-height: 1.58;
011 text-rendering: optimizeLegibility;
012 -webkit-font-smoothing: antialiased;
013 }
014 </style>
015 </head>
016
017 <body>
018 <p>CSS-стили внутри элемента style
019 и применяются к этому абзацу
020 в HTML-коде веб-страницы</p>
021 </body>
022 </html>
1.3. Строковое размещение
Строковое размещение CSS-кода с использованием атрибута style в элементе HTML:
001 <html>
002 <head></head>
003 <body style = "font-family: Arial;">
004 <p>При выводе в браузере этот абзац
005 наследует форматирование шрифтом Arial
006 из строкового стиля
007 в родительском элементе.</p>
008 </body>
009 </html>
1.4. Селекторы
Теперь мы знаем, где CSS-код находится в HTML-документе. Но прежде, чем мы начнем рассматривать каждое свойство по отдельности, полезно ознакомиться с грамматикой языка CSS — правилами синтаксиса для определения свойств и значений.
Наиболее распространенный селектор — само имя HTML-элемента (напомню, что за редким исключением HTML-элемент состоит из двух тегов, открывающего и закрывающего).
Использование имени тега приведет к выделению всех элементов данного типа. Выберем элемент body по его имени:
001 body { /* Сюда помещаются свойства CSS */ }
На первый взгляд, поскольку в HTML-документе есть только один элемент body, это единственное, что будет выбрано.
Однако из-за каскадной специфики CSS любое свойство, которое мы берем в скобки, также будет применяться ко всем его потомкам (дочерним элементам, содержащимся в элементе body, даже если мы не станем явно указывать их стиль).
Это пустой селектор. Он выбирает элемент body, но пока не назначает ему никаких свойств.
Ниже приведены несколько других примеров выбора объектов по имени их HTML-элемента. Это самые распространенные приемы.
001 /* Выбираем все элементы абзаца, p */
002 p { }
003
004 /* Выбираем все элементы div */
005 div { }
006
007 /* Выбираем все элементы p, только если они находятся
008 в элементах div */
009 div p { }
Ваши стили CSS будут заключены в {...эти...} скобки.
Инструкция CSS состоит из селектора и пары свойство:значение;. Несколько свойств должны быть разделены точкой с запятой. Начнем с одного свойства, просто чтобы посмотреть, как выглядит синтаксис CSS-свойства:
001 <div id = "box">контент<div>
В CSS идентификатор указывается в виде символа хештега #:
001 #box { свойство: значение; }
Используйте идентификаторы (id) для маркировки элементов всякий раз при наличии уникального контейнера.
Не форматируйте каждый отдельный HTML-элемент с помощью идентификаторов, задействуйте их для именования глобальных родительских элементов или для более значимых элементов (например, тех, которые необходимо часто обновлять из-за изменения содержимого).
Что, если мы хотим выбрать несколько элементов одновременно?
001 <ul>
002 <li class = "элемент">l<li>
003 <li class = "элемент">2<li>
004 <li class = "элемент">3<li>
005 </li>
Аналогично атрибут класса (class) обозначается селектором точки (.):
001 .item { line-height: 1.80; }
В данном примере точка используется для выбора нескольких элементов, имеющих одно и то же имя класса. Так свойству line-height (высота строки) присваивается значение 1.50 (что примерно соответствует 150 % высоты шрифта).
Специальные правила CSS: селектор :root применяет их ко всем HTML-элементам. Вы можете использовать :root, чтобы установить значения CSS по умолчанию для всего документа.
Установим Arial в качестве шрифта по умолчанию для всего документа или sans-serif, если шрифт Arial недоступен; вы можете указать столько шрифтов, сколько пожелаете:
001 :root { font-family: Arial, sans-serif; }
Селектор :root также часто используется для глобального хранения CSS-переменных.
Создайте CSS-переменную с именем --red-color и присвойте ей значение цвета red:
001 :root { --red-color: red; }
Учтите, что все имена переменных CSS должны начинаться с двойного дефиса --.
Теперь вы можете использовать CSS-переменную --red-color в качестве значения в стандартных селекторах CSS:
001 div { color: var(--red-color) ; }
Мы изучили, как селектор :root позволяет сохранить CSS-переменные, и узнали, что он также может сбросить до значений по умолчанию все форматирование документа.
Селектор звездочка (*) выполняет те же функции.
Можно использовать селектор * для достижения эффекта, вызываемого применением :root. Единственное отличие состоит в том, что селектор * нацелен абсолютно на все элементы в документе, а :root — только на контейнер документа без его дочерних элементов:
001 * { font-family: Arial, sans-serif; }
Несмотря на то что добавление селектора * дает тот же эффект, менее целесообразно использовать его для применения стилей ко всему документу (вместо этого задействуйте :root).
Лучше всего селектор * подходит для пакетного выбора «всех элементов» в пределах определенного родительского элемента.
Селектор #parent* может использоваться для выбора всех потомков родительского элемента независимо от их типа:
001 <div id = "parent">
002 <div>A</div>
003 <div>B</div>
004 <ul>
005 <li>l</li>
006 <li>2</li>
007 </ul>
008 <p>Текст.</p>
009 </div>
Продолжая экспериментировать с селекторами, вы заметите, что можно выбирать одни и те же HTML-элементы, используя разные комбинации селекторов.
Например, все следующие комбинации выбирают один и тот же набор элементов (все потомки родительского элемента, без учета самого предка). Селектор #parent* может использоваться для выбора всех потомков родительского элемента независимо от их типа:
001 /* Выбираем все дочерние элементы #parent */
002 #parent * { color: blue; }
003
004 /* Объединяем несколько селекторов, используя запятую */
005 #parent div,
006 #parent ul,
007 #parent p { color: blue; }
008
009 /* Применяем псевдоселекторы :nth-child */
010 #parent nth-child(1),
011 #parent nth-child(2),
012 #parent nth-child(3),
013 #parent nth-child(4) { color: blue; }
Конечно, наличие возможности не означает, что так нужно делать. Это лишь пример.
Наиболее целесообразным решением в данном случае является селектор #parent*. Но каждый проект, сайт или приложение требуют разметки, уникальной по своей структуре и назначению.
Поначалу создание селекторов может показаться простой задачей. Но это до тех пор, пока вы не углубитесь в более сложные примеры пользовательского интерфейса. С каждым разом ваш CSS-код будет становиться все сложнее и сложнее.
Сложность CSS-кода тесно связана со структурой самого HTML-документа. Поэтому даже некоторые из самых «умных» селекторов часто могут «пересекаться» с селекторами, созданными впоследствии, вызывая конфликты. Изучение CSS — настоящее искусство. Ваши навыки создания CSS-селекторов будут улучшаться только в процессе регулярной практики!
При работе над реальным проектом и ввиду постоянного усложнения макета приложений вы не сможете даже предположить, как часто конкретное CSS-свойство не будет работать нужным образом.
Когда пропущен определенный сценарий и допущена ошибка, разработчики часто используют ключевое слово !Important, чтобы быстро исправить проблему.
Вы можете переопределить любой стиль CSS, добавив ключевое слово !Important в конец кода CSS.
001 /* Выбираем все дочерние элементы #parent */
002 #parent * { color: blue; }
003
004 /* Выбираем только div в #parent и меняем цвет на красный */
005 #parent div { color: red; }
006
007 /* Проверяем, что все div во всем документе зеленого цвета */
008 div { color: green !important; }
Весьма заманчиво использовать ключевое слово !Important для принудительной установки стиля CSS. Но обычно такая практика считается порочной, поскольку игнорируется каскадная логика таблиц стилей!
| Предостережение Директиву !Important лучше вообще не использовать. Даже если вам покажется, что вы решаете проблему, применение директивы может значительно усложнить обслуживание вашего кода CSS. |
Идеальный вариант, когда CSS-селекторы максимально простые и эффективные. Однако такой баланс не всегда легко сохранить. Я обычно начинаю с набросков своего CSS-кода на бумаге. Потратив немного больше времени на обдумывание структуры приложения и написание заметок, вы быстрее создадите наиболее оптимальные селекторы.
1.5. Взаимосвязь между свойствами и значениями
Не все CSS-свойства одинаковы. В зависимости от типа свойства значение может быть мерой пространства, заданного в пикселах, единицах pt, em или fr, цветом, указанным в виде имени (red, blue, black и т.д.), шестнадцатеричного значения (#0F0 или #00FF00…) или rgb (r, g, b).
В других случаях значение уникально для конкретного свойства, и его нельзя использовать с любым другим свойством. Например, CSS-свойство transform может принимать значение, указанное с помощью ключевого слова rotate.
В данном случае принимается угол в градусах — CSS требует добавления букв deg к числовому значению градуса.
001 /* поворот этого элемента на 45 градусов по часовой стрелке */
002
003 #box {
004 transform: rotate(45deg);
005 }
Однако это не единственный способ указать угол. CSS предлагает еще три типа единиц, специально предназначенных для указания угла поворота: grad, rad и turn.
001 /* 200 градиан (град)*/
002 transform: rotate(200grad);
003
004 /* 1,4 радиан */
005 transform: rotate(1.4rad);
006
007 /* 0,5 оборота или 180 градусов (1 оборот = 360 градусов) */
008 transform: rotate(0.5turn);
В данном случае мы используем grad (градианы), rad (радианы) и turn (повороты) в качестве альтернативного способа задания угла поворота HTML-элемента.
Альтернативные способы указания значений не редкость для многих других CSS-свойств. Например, #F00, #FF0000, red, rgb(255,255,255) и rgba(255, 255,255,1.0) задают один и тот же цвет.
1.6. Комментарии в CSS-коде
Для создания комментариев в коде CSS поддерживается только синтаксис блочных комментариев.
Это делается путем вставки блока текста с использованием символов /*комментарий*/.
001 /* Установить белый цвет шрифта, используя
002 шестнадцатеричное значение */
003 p { color: #FFFFFF; }
004
005 /* Установить белый цвет шрифта, используя сокращенное
006 шестнадцатеричное значение */
007 p { color: #FFF; }
008
009 /* Установить белый цвет шрифта, используя название цвета */
010 p { color: white; }
011
012 /* Установить белый цвет шрифта, используя значение RGB */
013 p { color: rgb(255,255,255); }
014
015 /* Создать переменную CSS --white-color
016 (обратите внимание на двойной дефис) */
017 :root { --white-color: rgba(255, 255, 255, 1.0); }
018
019 /* Установить белый цвет шрифта,
020 используя CSS-переменную */
021 p { color: var(--white-color); }
Обратите внимание, как один и тот же цвет свойства может принимать различные типы значений. При использовании переменных CSS имя переменной предваряет двойной дефис (--).
Вы также можете закомментировать раздел CSS-кода целиком. Далее показано временное отключение блока кода CSS для тестирования нового кода или будущей ссылки и т.д.:
001 /* Временно отключить данный блок CSS
002 content:"hello";
003 border: 1px solid gray;
004 color: tfFFFFFF;
005 line-height: 48px;
006 padding: 32px;
007 */
CSS не поддерживает //встроенныекомментарии, или, скорее, они не оказывают влияния на CSS-интерпретатор браузера.
1.7. Оформление стилей
В CSS имеется множество свойств, связанных с габаритами и размерами (left, top, width, height и др.). Было бы излишним перечислять их все. Поэтому далее в примерах я буду использовать слово свойство.
Для указания значения служит шаблон свойство:значение. Такая комбинация позволит установить фоновые изображения, цвет и другие основные свойства HTML-элементов.
В качестве альтернативы можете использовать шаблон свойство:значениезначениезначение для установки нескольких значений одному свойству. Это и есть сокращенная форма записи. Значения разделяются пробелом.
Без сокращенной формы записи вы бы указали каждую часть свойства в отдельной строке.
001 /* Фон */
002 background-color: black;
003 background-image: url("image.jpg");
004 background-position: center;
005 background-repeat: no-repeat;
006
007 /* Сокращенная форма записи, только одна строка кода! */
008 background: black url("image.jpg") center no-repeat;
За все эти годы в CSS произошли значительные изменения. Прежде чем изучать визуальные схемы, описывающие каждое свойство, необходимо понять, как CSS интерпретирует шаблоны свойств и значений.
Большинство свойств используют следующие шаблоны:
001 /* Самая распространенная форма */
002 свойство: значение;
003
004 /* Значения, разделенные пробелом */
005 свойство: значениезначениезначение;
006
007 /* Значения, разделенные запятой */
008 свойство: значение, значение, значение;
Свойства, связанные с размером, могут быть рассчитаны с помощью ключевого слова calc:
001 /* Вычисление */
002 свойство: calc(значениеpx);
003
004 /* Вычисление значений в % и px – ок. */
005 свойство: calc(значение% - значениеpx);
006
007 /* Вычисление значений в % и % – ок. */
008 свойство: calc(значение% - значение%);
009
010 /* Сложение px и px – ок. */
011 свойство: calc(значениеpx + значениеpx);
Вычитание, умножение и деление выполняются по той же схеме. Только не пробуйте делить на значение в пикселах.
001 /* Вычитание px из px – ок. */
002 свойство: calc(значениеpx - значениеpx);
003
004 /* Умножение px на число – ок. */
005 свойство: calc(значениеpx * число});
006
007 /* Деление px на число – ок. */
008 свойство: calc(значениеpx / число});
009
010 /* Деление числа на px – ошибка. */
011 свойство: calc(число / значениеpx});
Последний пример выдаст ошибку. Используя ключевое слово calc, вы не можете разделить число на значение, указанное в пикселах (px).
1.8. CSS-переменные
Вы можете задействовать CSS-переменные, чтобы избежать многократного определения одних и тех же значений в различных CSS-селекторах. Имена переменных CSS всегда начинаются с двух дефисов.
Определить CSS-переменную в глобальной области видимости можно с помощью селектора :root. Здесь элемент используется только в качестве заполнителя, в реальной же работе он будет заменен допустимым именем HTML-элемента:
001 /* Определяем переменную --default-color */
002 :root { --default-color: yellow; }
003
004 /* Определяем переменную --variable-name */
005 :root { --variable-name: 100px; }
006
007 /* Устанавливаем значение переменной
008 цвета фона -–default-color */
009 элемент { background-color: var(--default-color); }
010
011 /* Устанавливаем ширину 100px */
012 элемент { width: var(--variable-name); }
Локальные переменные
Вы можете создавать локальные переменные, содержащиеся только в определенном родительском элементе. Таким образом, они не проникают в глобальную область видимости и не получают другие определения переменных, потенциально объявленных с тем же именем.
Хорошая идея — сохранять определения переменных, скрытых для области, в которой они используются. Обычно это эффективно для любого языка программирования, например JavaScript, но годится и для CSS:
001 // Определение локальной переменной
002 .notifications { --notification-color: blue; }
003
004 // Локализация переменной для дочерних элементов
005 .notifications div {
006 color: var(--notification-color);
007 border: 1px solid var(--notification-color);
008 }
1.9. Метаязык SASS
Syntactically Awesome Stylesheet, или SASS, — это препроцессор CSS, добавляющий новые функции, которые в настоящее время недоступны в стандартной версии CSS.
SASS — расширенный набор стандартных CSS. То есть все, что работает в CSS, будет работать в SASS.
Мы больше не используем прежний синтаксис SASS с файлами в формате .SASS. Вместо этого применяется формат .scss — новая (и улучшенная) версия SASS.
SCSS рекомендуется для опытных специалистов CSS. Возможно, есть кто-то, способный оценить всю красоту использования цикла for в качестве директивы стиля CSS.
Обратите внимание: с 10 декабря 2018 года SASS/SCSS не встраивается в браузеры. Для включения такой функции на своем веб-сервере вам необходимо установить компилятор SASS из командной строки.
Если хотите начать экспериментировать с SASS, то зайдите на сайт www.codepen.io, где сможете легко начать использовать интерпретацию SASS без предварительной настройки. CodePen — это среда разработки для дизайнеров и программистов.
Имена переменных SASS определяются начальным символом $, так же как в языке PHP!
001 $font: Helvetica, sans-serif;
002 $dark-gray: #333;
003
004 body {
005 font: 16px $font;
006 color: $dark-gray;
007 }
Что можно сделать с помощью SASS?
001 $a: #E50C5E;
002 $b: #E16A2E;
003
004 .mixing-colors {
005 background-color: mix($a, $b, 30%);
006 }
В данном случае SASS использовался для смешивания двух цветов, определенных в переменных SASS $a и $b.
Я предлагаю вам продолжить изучение SASS/SCSS самостоятельно, но только после того, как вы освоите стандартный CSS, описанный в книге.
1.10. Суть каскадных таблиц стилей
Каскадные таблицы стилей названы так по определенной причине. Представьте водопад с водой, разбивающейся внизу о камни. Каждый камень, на который упала вода, становится влажным. Точно так же каждый стиль CSS наследует стили, уже примененные к его родительскому элементу HTML.
Посмотрите на следующую схему. Стили CSS буквально «сползают» по иерархии DOM, представляющей древовидную структуру вашего сайта. Язык CSS (с помощью некоторых селекторов) позволяет контролировать этот обычно странный процесс.
Чтобы представить основную концепцию CSS, рассмотрим простую структуру сайта.
На схеме представлено несколько элементов, вложенных в основной контейнер сайта. CSS, подобно пинцету, помогает выбирать элементы, к которым мы хотим применить определенный стиль
Если вы примените черный фон к элементу body, то все вложенные элементы в нем автоматически унаследуют черный фон:
001 body { background: black color: white; };
Данный стиль будет «каскадно» перемещаться по родительской иерархии, заставляя все следующие HTML-элементы наследовать белый текст на черном фоне.
Базовая структура HTML:
001 <body>
002 <header>
003 <p>Шапка сайта</p>
004 </header>
005 <article>
006 <p>Основной контент/p>
007 </article>
008 <footer>
009 <p>Privacy Policy. <span>©
010 2019 Copyright</span></p>
011 </footer>
012 </body>
В том случае, если вы хотите оформить подвал (footer) и выделить слова Privacy Policy красным цветом, а 2018 Copyright — зеленым, можете расширить каскадный принцип, добавив следующие CSS-команды.
001 body { background: black; color: white; }
002 footer { color: red; }
003 footer span { color: green; }
Обратите внимание: между словами footer и span есть пробел. В CSS он выступает актуальным символом селектора CSS. Это означает следующее: «найти в ранее указанном теге» (в данном примере footer).
1.11. Селекторы CSS
Основные CSS-селекторы:
001 /* Выбираем один элемент с идентификатором id */
002 #id { }
003
004 /* Выбираем все элементы с классом class */
005 .class { }
006
007 /* Выбираем все элементы с классом class1, создающие иерархию
008 с другим родительским элементом с идентификатором parent */
009 #parent .class1 { }
1.12. Лояльность CSS
Поскольку разработка CSS велась для сред, в которых загрузка полной копии сайта не всегда гарантирована, он является одним из самых лояльных языков, похожих на HTML. Если вы допустите ошибки или по какой-то причине страница полностью не загрузится, то CSS-код будет постепенно утрачивать свойства настолько, насколько возможно. Это значит, что вы все еще можете использовать //встроенныекомментарии, но, вероятно, не стоит этого делать.
1.13. Распространенные комбинации
Рассмотрим некоторые из наиболее распространенных комбинаций CSS-свойств и значений:
001 /* Устанавливаем белый цвет шрифта */
002 color: #FFFFFF;
003
004 /* Устанавливаем черный цвет фона */
005 background-color: #000000;
006
007 /* Создаем вокруг элемента синюю границу толщиной 1 пиксел */
008 border: 1px solid blue;
001 /* Устанавливаем белый цвет шрифта */
002 font-family: Arial, sans-serif;
003
004 /* Устанавливаем размер шрифта 16рх */
005 font-size: 16px;
006
007 /* Добавляем отступы размером 32px */
008 padding: 32px;
009
010 /* Добавляем вокруг области контента отступ размером 16px */
011 margin: 16px;
1.14. Сокращенные нотации
Назначим три различных свойства, способствующих появлению фонового изображения HTML-элемента:
001 background-color: #000000;
002 background-image: url("image.jpg");
003 background-repeat: no-repeat;
004 background-position: left top;
005 background-size: cover;
006 background-atachment: fixed;
То же самое можно сделать, используя одно сокращенное свойство background, разделяя значения пробелом:
background: background-color background-image background-repeat;
Остальные комбинации настроек фона рассматриваются в главе 14.
001 background: #000000 url("image.jpg") left top no-repeat fixed;
Сокращения также применимы к различным свойствам grid- и flex-верстки.
2. Псевдоэлементы
Псевдоэлементы начинаются с двойного двоеточия ::. В данном контексте псевдо означает, что они не ссылаются на явные элементы DOM, вручную добавленные в документ HTML, например элемент выделения текста.
2.1. ::after
p::after{content:"Добавлено после";}
2.2. ::before
p::before{content:"Добавлено до";}
2.3. ::first-letter
p::first-letter{font-size:200%;}
2.4. ::first-line
p::first-line{text-transform:uppercase;}
2.5. ::selection
::selection{background:black;color:white;caret-color:blue;}
2.6. ::slotted(*)
Псевдоселектор slotted работает только в контексте HTML-элемента template для выбора элементов slot.
::slotted(*) или ::slotted(имя-элемента)
3. Псевдоселекторы
В CSS псевдоселектор — это любой селектор, который начинается с символа двоеточия (:) и обычно добавляется в конец имени другого элемента — часто родительского контейнера. Псевдоселекторы также известны как псевдоклассы.
Псевдоселекторы :first-child и :last-child используются для выбора самого первого или самого последнего элемента из списка потомков в родительском элементе.
Псевдоселектор :nth-child служит для выбора серии элементов, принадлежащих строке или столбцу в списке элементов или даже в таблице HTML.
Далее рассмотрим несколько случаев, демонстрирующих применение псевдоселекторов. Они эффективны при использовании вместе с другими селекторами элементов. Увидев, как псевдоселекторы влияют на таблицу HTML, легко понять их принцип работы, поскольку таблица имеет дочерние элементы, охватывающие оба измерения (строки × столбцы).
Вы можете использовать код tabletr:first-child для выбора всех элементов в первой строке:
Выберите первый столбец с помощью селектора tabletd:first-child:
Обратите внимание: между td и :first-child нет пробела. Это важно, поскольку td:first-child (с пробелом) — совершенно другой селектор. Изменение несущественно, однако результаты разные, так как ваш результат будет эквивалентен td*:first-child.
Помните, что символ пробела является селектором иерархии элементов? Примеры ниже комбинируют псевдоселекторы с tr и td для выбора определенного столбца или строки.
table tr td:nth-child(2)
