Всем привет. Сегодня мы узнаем, что такое классы, айдишники и о всех остальных видах селекторов, которые могут быть в CSS. Давайте сразу приступим к делу и откроем наш проект из предыдущего урока, в котором мы уже рассмотрели первый вид селекторов - селекторы по тегам.
Следующий вид селекторов - универсальные. Записывают звездочкой *. Универсальный селектор применяется ко всем элементам которые есть на странице.
Задал свойство font -family, которое определяет шрифт текста. Можно записать любое количество шрифтов через запятую и браузер будет проверять шрифты по порядку, начиная с первого. Если не находит шрифт в своей базе, то проверяет следующий. В данном случае браузер сразу нашел первый шрифт, и использовал helvetica. Sans-serif в sublimetext3 выделен синим цветом, т.к. это название семейства шрифтов, а не отдельного шрифта как например arial. По у молчанию в разных браузерах стоят разные шрифты.
Третий вид селекторов - селекторы по классу. Класс (class) - это атрибут в html, значением которого является имя класса, которое вы сами зададите. Данный вид селекторов самый распространенный, и вы в своих сайтах скорее всего тоже будете использовать его чаще всего. Записывается этот селектор, начиная с точки, а далее - имя класса.
Еще один вид селекторов - селекторы по ID (айдишники). Айдишник - это определенный вид атрибута, который применяется индивидуально к одну элементу в отличие от селектора по классам, который мы можем применять одновременно ко многим элементам. Айдишники используются крайне редко в CSS, чаще они используются при работе с JavaScript, и применять его начинающим сайтостроителям навряд ли придется вообще. Записывается он, начиная с решетки, а далее - значение атрибута.
C помощью свойства font-size сделал высоту букв 29 пикселей, а с помощью font-weight сделал шрифт максимально жирным.
Следующий вид селекторов - селекторы по атрибутам.
Cледующий вид селекторов - селектор потомков или контекстный селектор. Применяется, например, когда элементов очень много и чтобы не присваивать каждому из них класс, можно присвоить класс элементу предку.
В данном случае можно было с таким же результатом использовать селектор по тегам, но если на странице есть еще ссылки, то задний фон применился бы и к ним, а нам нужно, чтобы только эти две ссылки, заключенные тегом <div>, имели такой фон. Запись данного вида селекторов очень похожа на запись селекторов по классу, единственное что добавляется - это название тега-предка.
Cледующий вид селекторов - дочерние селекторы. Записывается так же как и контекстный, только перед тегом ставится знак больше >
На первый взгляд то же самое, что и контекстный селектор, но разница есть не только в записи, но и в том, что применяется селектор только к дочерним элементам, к внукам и правнукам уже нет. Специально для примера создал блок внутри блока, и слово "Красавица" оказалось не зачеркнутым, т.к. является внучкой, а не дочкой к блочному элементу с классом.
Следующий вид селекторов - сестренские селекторы. Записывается начиная с точки или решетки (в зависимости от вида селектора у сестренского элемента), далее имя(значение) селектора, потом через пробел знак плюс + и название сестренского тега к которому хотим применить свойство.
Теги <h1> и <span> в данном случае сестренские, т.к. они самые ближайшие друг другу.
Следующий селектор - селектор псевдоклассов. Существует около тридцати псевдоклассов в CSS. Сначала записывается тег к которому будет применяться свойсво, далее через двоеточие название псевдокласса и в скобках {} уже свойство. Все псевдоклассы можно посомтреть тут
В данном случае я применил псевдокласс наведения hover, т.е. свойство срабатывает при наведении курсора мыши. Свойством поставил отключение нижнего подчеркивания ссылок.
Последним будет селектор псевдоэелементов. Их всего около двадцати. Все можно посмтреть тут
Сделал первую букву тега заголовка <h1> серого цвета.
На сегодня все. Вкратце рассмотрели все виды селекторов и их синтаксис в коде CSS. Подписывайтесь, кто этого еще не сделал, чтобы не пропустить новые уроки.