HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.
Псевдоэлементы и псевдоклассы
Loading...
From the course by Moscow Institute of Physics and Technology
Основы HTML и CSS
94 оценки
Moscow Institute of Physics and Technology
94 оценки
Course 2 of 5 in the Specialization Разработка интерфейсов: вёрстка и JavaScript
From the lesson
Введение в CSS
Поговорим о том, почему появился CSS, и разберёмся в его структуре. Вы научитесь грамотно применять и комбинировать различные типы селекторов (селекторы тегов, классов, идентификаторов и атрибутов). Также мы расскажем, что такое псевдоэлементы и псведоклассы, какие они бывают и как с ними работать. Вы разберётесь в том, что такое специфичность, как она высчитывается и как это влияет на порядок применения свойств в CSS.
Meet the Instructors
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
Следующая тема, которую мы с вами рассмотрим — это псевдоселекторы.
В CSS существует два вида псевдоселекторов: это псевдоэлементы и
псевдоклассы.
Начнем с псевдоклассов.
Псевдоклассы — это такие селекторы, которые позволяют выбрать элементы,
в зависимости от их состояния.
В данном случае я рассмотрю псевдоклассы, которые соответствуют состояниям ссылок.
Многие из вас, кто когда-либо вообще работал с CSS, наверное, помнят эти
псевдоклассы, потому что они существуют с самых ранних пор становления CSS.
В данном примере мы можем выбрать все элементы,
которые являются ссылками на странице — это псевдокласс link, ссылки,
на которые мы навели сейчас мышью — псевдокласс hover,
или сфокусировались с помощью клавиатуры — псевдокласс focus, а также ссылки,
на которые мы сейчас нажали мышью — псевдокласс active,
и которые посетили в принципе — класс visited.
Надо заметить, что псевдокласс focus в последнее время может выбрать
не только элементы, которые являются ссылками, но и другие.
Псевдокласс hover мог это сделать и с ранних версий спецификаций, но не
работал в Internet Explorer'е, к счастью, сейчас эта проблема уже не актуальна.
В данном случае у нас есть синяя ссылка, она синяя, потому что я ее еще не посещал.
Количество псевдоклассов не ограничивается данным списком,
давайте рассмотрим еще некоторые динамические псевдоклассы, которые были
введены в более поздних спецификациях CSS, в частности третьего уровня.
Например, два таких псевдокласса — enabled и disabled — позволяют выбирать
элементы в зависимости от их доступности для взаимодействия пользователя.
Несложно догадаться, что псевдокласс disabled, например,
соответствует элементам форм input'ам,
которые были деактивированы, то есть у них стоит атрибут disabled.
Еще два типа псевдоклассов — checked и indeterminate.
псевдокласс checked позволяет выбрать все элементы,
в частности форм, в которых есть атрибут checked.
Псевдокласс indeterminate еще интересней — такого состояния нет в HTML'е,
но такое состояние существует у checkbox'ов в принципе,
вы его можете задать из Javascript'а.
Чаще всего он употребляется для вложенных списков,
для того чтобы выбрать одним checkbox'ом всю категорию.
Но если вдруг внутри категории вы выбираете не все элементы, а только
некоторые, то селектор для категории переходит в неопределенное состояние.
Он как бы показывает,
что у вас в категории есть и выбранные и невыбранные элементы.
Именно с помощью состояния indeterminate вы можете выбрать данные элементы.
Есть псевдокласс read-only, он позволяет выбрать те элементы,
у которых задан атрибут «только для чтения».
Есть псевдокласс valid.
На предыдущих лекциях мы уже показывали вам, как можно у элементов форм задать
паттерн, по которому пользовательский ввод будет валидироваться.
Псевдокласс valid позволяет у элемента форм показать,
что введенный код, например, валиден.
Давайте рассмотрим пример.
У нас есть input, у которого мы задаем background'ы в зависимости от состояния.
У нас задается background red тогда,
когда input в принципе доступен для редактирования,
background yellow, когда input не доступен для редактирования,
и background green, когда введенный пользовательский ввод валиден.
В данном случае несложный пользовательский ввод предполагается — просто 9 цифр.
Давайте попробуем ввести что-нибудь в желтый input.
Как мы видим, это нельзя сделать.
Теперь давайте поработаем с зеленым input'ом.
Здесь я хотел бы сразу же заметить, что почему-то браузер, когда вы ничего
не ввели в input, считает его по умолчанию валидным, хотя это не так.
Но вот есть такая особенность, которую нужно учитывать,
когда вы разрабатываете ваши элементы форм.
Итак, давайте попробуем что-нибудь ввести — вы видите сразу же,
что input стал красным — это потому что мы ввели недостаточное число цифр.
Давайте довведем.
Итак, 9 цифр, и у нас ввод валидный.
Следующее семейство псевдокласов, которое мы рассмотрим, позволяет выбирать
элементы в зависимости от их положения в структуре HTML-документа.
Они так и называются: «структурные псевдоклассы».
Например, псевдокласс root позволяет выбрать корневой элемент HTML-документа.
Псевдоклассы firts-child и last-child позволяют выбрать
соответственно первого или последнего ребенка.
Псевдоклассы nth-child и nth-last-child позволяют
выбрать n-ного ребенка или n-ного ребенка с конца.
Здесь, в дополнение к самому псевдоклассу,
мы указываем формулу расчета этого n-ного ребенка: n подставляется от 0 до ∞.
Несложно догадаться, что в данном примере мы выбираем всех нечетных детей.
Другие два псевдокласса позволяют выбирать детей не
только в зависимости от их положения относительно других детей,
но еще и предварительно сгруппировав их по типу.
Пример будет чуть-чуть позже.
Наконец, есть два селектора, которые позволяют выбирать уникальных детей,
например уникального ребенка, точнее единственного ребенка,
или единственного ребенка заданного типа.
И, наконец, псевдокласс empty позволяет выбирать элементы,
которые пустые, то есть не содержат никакого контента.
Давайте перейдем к примерам.
Итак, возьмем вот такую вот структуру HTML-документа,
я ее схематически изобразил на картинке справа.
И попробуем поприменять различные псевдоклассы.
Например, вот таким будет результат применения псевдокласса first-child,
несложно даже по самой структуре увидеть, какие элементы являются первыми детьми.
Это корневой элемент html, внутри элемента
html лежит список ненумерованный, внутри списка есть три
элемента списка, и среди них мы также выбираем первый и так далее.
То есть мы на каждом уровне выбираем первый элемент.
Точно так же ситуация обстоит с селектором last-child,
за исключением того что, например, если элемент является единственным ребенком,
как у нас во втором списке, то его можно будет выбрать как с помощью
селектора first-child, так и с помощью селектора last-child.
В данном случае мы выберем вот эти вот элементы.
Идем дальше: only-child.
Он позволяет выбрать только те элементы,
которые являются единственными детьми внутри данного.
Здесь такой элемент только один, вот он.
Наконец, возможность выбирать n-ного ребенка.
Здесь мы выбираем каждого четного ребенка.
Ну и опять же несложно догадаться и сопоставить этого
n-ного ребенка в зависимости от структуры HTML-документа.
Я немножечко поменял здесь разметку, для того чтобы вы поняли следующий пример.
Мы выбираем не просто n-ного ребенка, но и n-ного ребенка заданного типа.
В данном случае тип диктуется селектором
до псевдокласса nth-of-type, то есть мы берем все div'ы и среди
них выбираем n-ные, в данном случае четные.
Что происходит внутри браузера?
Для начала браузер выбирает все div'ы,
на всех уровнях, то есть это именно вот эти div'ы.
А потом среди выбранных div'ов на каждом из уровней выбранных, то есть только
среди соседних div'ов он выбирает четные, то есть он выберет вот эти два div'а.
Если же мы, например, не будем указывать тип,
то эту операцию браузер будет проделывать с каждым тегом,
то есть он выберет сначала все div'ы и среди них выберет четные,
потом все span'ы, все em'ы и так далее.
И среди каждого типа будет выбирать четные.
Вот так работает селектор nth-of-type и аналогичные ему.
Следующий вид псевдоселекторов,
о которых хотелось бы поговорить — это так называемые псевдоэлементы.
Почему псевдоэлементы?
Потому что в структуре HTML-документа вы не увидите эти элементы,
вы не сможете задать их в структуре HTML-документа.
Но это селекторы,
которые позволяют выбирать так называемые несуществующие элементы на странице.
Например, вы можете выбрать первую букву, и, соответственно,
для первой буквы внутри данного элемента задать определенные стили.
В частности компания «Яндекс» очень часто пользуется таким трюком,
для того чтобы в логотипе компании сделать первую букву красной.
Или вы можете выбрать первую линию текста.
В данном примере вы можете увидеть, что у нас первая строка стала синей,
так как мы задали псевдоэлементу firtst-line синий цвет.
И первая буква стала красной, потому что у нас есть селектор first- letter.
В CSS есть еще два псевдоэлемента: это элементы before и after,
но они означают не элементы «до» и «после», а это реально существующие
элементы, которые вставляются внутри HTML-документа виртуально.
После открывающего тега before и перед
закрывающим тегом элемента after, то есть они всегда находятся именно здесь.
Зачем такое может быть нужно?
Например, вы хотите оформить цитату,
и для цитаты вы задаете стили: что вы хотите показать — кавычки,
— и определенные им задать свойства, например в данном случае.
Делается это таким CSS, а результат будет вот таким.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
