Защита от перенапряжения

Что выберет селектор. CSS: родственные селекторы (~). Заголовок с заданным классом

25.03.2023

Ближайшие статьи этого учебника будут посвящены глубокому изучению селекторов, благодаря которым вы научитесь выбирать совершенно любой элемент, размещенный в HTML документе.

Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).

Селектор типа

В предыдущих примерах, да и в практическом задании предыдущей статьи " " мы с Вами использовали селекторы типа, которые определяют HTML элемент, к которому будет применен стиль. Если вы хорошо знакомы с HTML тегами, то вам будет легко определять в стилях селекторы типа, так как они имеют одноимённые наименования с форматируемыми элементами, например:

  • p

    (параграф).

  • table - сообщает браузеру, что необходимо отформатировать все HTML теги (таблица).
  • li - сообщает браузеру, что необходимо отформатировать все HTML теги
  • (элемент списка).

    • Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (

    ):

    </span>Селектор типа

    Обычный заголовок второго уровня

    Результат нашего примера:

    Как вы могли заметить, селектор типа позволяет стилизовать сразу все элементы подобного типа, но что делать если нам необходимо стилизовать какой-то однотипный элемет отлично от других? В этом случае селектор типа нам уже не подойдет и нам придется использовать селектор класса.

    Селектор класса



    Рис. 4 Селектор класса в CSS.

    Прошу от Вас максимального внимания, так как селектор класса является одним из самых распространенных и востребованных селекторов CSS, который мы будем постоянно использовать в дальнейшем изучении CSS.

    И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:

    .test { /* имя класса в таблице стилей задается через точку */ text-align : center ; font-family : Courier ; color : green ; /* задаем цвет текста*/ margin-top : 50px ; /* добавляем отступ от верхнего края элемента */ }

    После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:

    class = "test" > Заголовок второго уровня

    /* задаем класс для элемента*/

    Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:

    • в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, ).
    • название после точки всегда должно начинаться с символа (неправильно: .50cent , .-vottakvot ).
    • Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).
    </span>Селекторы класса

    Обычный заголовок второго уровня

    Заголовок с заданным классом

    Результат нашего примера:

    Рис. 5 Использование селектора класса.

    Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:

    </span>Пример выделения одного слова

    Обычный заголовок class = "test" > второго уровня

    Результат нашего примера:

    Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:

    a.test { /* выбирает все элементы с классом test */ блок объявлений ; } p.intro { /* выбирает все элементы

    С классом intro */ блок объявлений ; }

    ID селекторы



    Рис. 7 Селектор id в CSS.

    Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором. Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:

    #test { /* имя идентификатора в таблице стилей задается через решетку */ background-color : #00FF00 ; /*Задаём цвет заднего фона*/ color : white ; /*Задаём цвет шрифта белый*/ font-size : 30px ; /*Указываем размер шрифта*/ width : 600px ; /*Указываем ширину элемента*/ height : 40px ; /*Указываем высоту элемента*/ text-align : center ; /*Выравниваем текст по центру внутри элемента*/ }

    После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут со значением нашего идентификатора, но уже без решетки:

    id = "test" > Обычный заголовок второго уровня

    Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:

    • значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
    • все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута она не ставится, будьте внимательны из-за этого возникает много ошибок ).
    • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
    • название после решётки всегда должно начинаться с символа (неправильно: #50cent , #-vottakvot ).
    • Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

    Теперь соберем это в одном примере и посмотрим результат:

    </span> ID селекторы

    Обычный заголовок второго уровня

    Результат нашего примера:

    В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript .

    Групповые селекторы

    В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа , селекторы класса , так и рассмотренные нами id селекторы . При перечислении любых селекторов (даже, которые мы будем рассматривать далее в учебнике) необходимо обязательно разделять их запятой , позднее вы поймете почему.

    Например:

    Первым групповым селектором мы указываем, что заголовки

    и

    , элементы с классом test и элемент с идентификатором test получат цвет заднего фона зеленый .

    Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.

    Рассмотрим следующий пример:

    </span>Групповые селекторы

    Заголовок первого уровня

    Заголовок второго уровня

    class = "test" > Абзац с классом test

    Заголовок третьего уровня

    id = "test" > Абзац с идентификатором test

    Заголовок четвертого уровня

    В этом примере мы использовали три групповых селектора:

    Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).

    Давайте рассмотрим пример использования:

    </span>Универсальный селектор

    Заголовок первого уровня

    Заголовок второго уровня

    Абзац, который не несет никакой смысловой нагрузки

    В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.

    Результат нашего примера:

    Кроме того универсальный селектор может использоваться в качестве селектора потомков и выбирать все элементы, которые находятся внутри другого элемента.

    .test * { /* выбирает все элементы внутри элемента c назначенным классом test */ объявление ; } #test * { /* выбирает все элементы внутри элемента c назначенным идентификатором test */ объявление ; } div * { /* выбирает все элементы внутри элемента
    */ объявление ; }

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практическое задание:


    Подсказка: при выполнении практических заданий вы можете располагать стилевую информацию как внутри самой веб страницы, так и в отдельном файле. В практических заданиях для определения цвета элементов вы можете использовать графические редакторы - инструмент палитра (пипетка), либо установите плагин для вашего браузера (например, CollorZilla ), либо использовать свои цвета, так как копирование цветов не является целью практического занятия.

    После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

    Что такое селектор в css – это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы.

    1) .Х

    .topic-title { background-color: yellow; }

    CSS селектор по классу Х . Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.

    • Chrome
    • Firefox
    • Safari
    • Opera

    2) #X

    #content { width: 960px; margin: 0 auto; }

    CSS селектор по id . Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    3) *

    * { margin: 0; padding: 0; }

    CSS селектор всех элементов . Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.

    Символ * также можно использовать чтобы выделить все дочерние элементы:

    #header * { border: 5px solid grey; }

    В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    4) X

    a { color: green; } ol { margin-left: 15px; }

    CSS селектор типа . Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    5) Х Y

    li a { font-weight: bold; text-decoration: none; }

    CSS селектор потомков или CSS селектор дочерних элементов используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор. Используя цепочки таких селекторов, всегда спрашивайте себя, а можно ли для выделения данного элемента использовать еще более короткую последовательность селекторов.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    6) Х + Y

    div + p { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; }

    Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.

      Какими браузерами поддерживается:
    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Chrome

    7) Х > Y

    #content > ul { border: 1px solid green; }

    CSS селектор потомков . Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:

    • Элемент списка
      • Потомок первого элемента списка
    • Элемент списка
    • Элемент списка

    CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    8) Х ~ Y

    ol ~ p { margin-left: 10px; }

    Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera
    a:link { color: green; } a:visited { color: grey; }

    Псевдо-класс:link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс:visited .

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    10) X

    a { color: red; }

    CSS селектор по атрибуту . В этом примере выбираются только те ссылки, у которых есть атрибут title.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    11) X

    a { color: yellow; }
      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    12) X

    a { color: #dfc11f; }

    Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    13) X

    a { background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; }

    На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    14) X

    a { color: green; }

    Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    15) X

    a { color: green; }

    Здесь мы применяем CSS селектор по пользовательскому атрибуту . Добавляем наш собственный атрибут data-filetype в каждую ссылку:

    ссылка

    Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    16) X

    Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.

    ссылка

    С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:

    /* Выбрать элемент, атрибут data-info которого содержит значение external */ a { color: green; } /* Выбрать элемент, атрибут data-info которого содержит значение image */ a { border: 2px dashed black; }

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    17) X:checked

    input:checked { border: 3px outset black; }

    Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    18) X:after

    Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.

    Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

    Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    19) X:hover

    div:hover { background-color: rgba(11,77,130,0.5); }

    Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.

    A:hover { border-bottom: 1px dotted blue; }

      Какими браузерами поддерживается:
    • IE6+ (В IE6 применимо только к ссылкам)
    • Chrome
    • Firefox
    • Safari
    • Opera

    20) X:not(selector)

    div:not(#content) { color: grey; }

    Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .

    По такому же принципу можно выбрать все элементы кроме p:

    *:not(p) { color: blue; }

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    21) X::pseudoElement

    p::first-line { font-weight: bold; font-size: 24px; }

    Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов – к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам.

    Выбор первой буквы параграфа:

    P::first-letter { font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; }

    Выбор первой строки в параграфе:

    P:first-line { font-size: 28px; font-weight: bold; }

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    22) X:first-child

    ul li:first-child { border-top: none; }

    Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1 .

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera 3.5+
    • Android

    23) X:last-child

    ul > li:last-child { border-bottom: none; }

    Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3 .

      Какими браузерами поддерживается:
    • IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
    • Chrome
    • Firefox
    • Safari
    • Opera 9.6+
    • Android

    24) X:only-child

    div p:only-child { color: green; }

    Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari 3.0+
    • Opera 9.6+
    • Android

    25) X:nth-child(n)

    li:nth-child(3) { color: black; }

    Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3 .

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.6+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    26) X:nth-last-child(n)

    li:nth-last-child(2) { color: red; }

    Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child . Этот метод такой же как и предыдущий, но отсчет ведется с конца.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.6+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    27) X:nth-of-type(n)

    ul:nth-of-type(3) { border: 1px dotted black; }

    Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.6+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    28) X:nth-last-of-type(n)

    ul:nth-last-of-type(3) { border: 2px ridge blue; }

    Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.6+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    29) X:only-of-type

    li:only-of-type { font-weight: bold; }

    Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.5+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    30) X:first-of-type

    ul:first-of-type > li:nth-child(3) { font-style: italic; }

    Псевдокласс first-of-type выбирает первый элемент заданного типа.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.5+
    • Safari 3.1+
    • Opera 9.5+
    • Android 2.1+
    • iOS 2.0+

    Всем привет, хабрчане.
    Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
    Самыми используемыми являются старые добрые #id и.class они знакомы всем, кто хоть раз работа с CSS.
    На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.

    CSS Selectors

    Объясняю многие селекторы применимо к указанному примеру.

    .class
    (Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.
    #id
    (Пр. #Block_Form) Этот селектор объедение элементы с id=«Block_Form» В чем скажите разница между.class и #id - а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что - Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.
    Класс может быть использован многократно, идентификатор же должен быть уникальным.
    *
    Выбирает, объединяет все элементы
    (Пр. *) { background-color:yellow; })
    element
    (Пр. p) Объединяет все элементы тега p.
    element,element
    (Пр. div,p) Объединяет все элементы div и все элементы p
    .
    Так же в эту группу можно выделить похожие селекторы:
    element element
    (Пр. div p) Выбирает все элементы p внутри div.
    element>element
    (Пр. div>p) Объединяет все p для которых родителем выступает div.
    element+element
    (Пр. div+p) Объединяет все p которые расположены сразу после div.
    (Пр. ) Объединяет все элементы с атрибутом target
    (Пр. ) Объединяет все элементы с заданным target="_blank"
    (Пр. ) Объединяет все элементы, которые в своем title содержат «Apple»
    (Пр. ) Объединяет все элементы с атрибутом class начиння с «top»

    Все теги написаны были без "<>".

    Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач - от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.

    Так же их называют Псевдокласы:
    :link
    (Пр. a:link) Объединяет все ссылки, которые еще не посещались (Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить
    :active
    (Пр. a:active) Псевдокласс:active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
    :hover
    (Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль
    :focus
    (Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем
    :first-letter
    (Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента
    :first-line
    (Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются
    :first-child
    (Пр. p:first-child) Что бы просто объяснить - применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя
    Дальше идут два очень интересных класса:
    :before
    (Пр. p:before)
    :after
    (Пр. p:after)
    Они применяются в тех случаях, когда - нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. Также нужно помнить о том, что при добавлении:before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении:before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
    :before наследует стиль от элемента, к которому он добавляется.
    :lang(language)
    (Пр. p:lang(it)) Довольно простой, но порой нужный элемент - для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»
    Селекторы CSS3

    Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.

    element1~element2
    (Пр. p~ul)
    p~ul { background:red; } Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря - на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
    A div element.
    • Item
    • Item
    • Item
    - в этом случае ничего не произойдет, а в
    • Item
    • Item
    • Item

    а в этом случае поля Айтемов будут иметь бэк-цвет - красный.
    (Пр. a) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:
    item1
    item2
    item3

    Item4


    Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.
    (Пр. a) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на ". PDF. И вот еще один наглядный пример:
    Item1
    Item2
    Item3

    Item4


    На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.
    (Пр. a) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».
    item1
    item2
    item3

    Item4


    В этом примере результатом будут закрашенные строки item1, item3, item4.

    :first-of-type
    (Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.
    :last-of-type
    (Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.
    :only-of-type
    (Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как:first-of-type:last-of-type или:nth-of-type(1):nth-last-of-type(1).
    :only-child
    (Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя

    Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):

    :nth-child(n)
    (Пр. p:nth-child(2)) Для каждого

    Который является вторым дочерним элементом у родителя.

    :nth-last-child(n)
    (Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего.
    :nth-of-type(n)
    (Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right.
    :nth-last-of-type(n)
    (Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего.
    :last-child
    (Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.

    Также стоит выделить:

    :root
    (Пр. :root) Такой селектор определяет корневой элемент документа, иначе говоря - .
    :empty
    (Пр. p:empty) Определяет пустые элементы - без каких-либо дочерних элементов, текста или пробелов.
    :target
    (Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id - #news element. Используется для URL.
    :enabled
    (Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным - disabled) элементам форм, простите за тавтологию.
    :disabled
    (Пр. input:disabled) Иначе говоря – применимо к стилю заблокированных элементов формы.
    :checked
    (Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же.
    :not(selector)
    (Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

    Последнее обновление: 21.04.2016

    Определение стиля начинается с селектора. Например:

    Div{ width:50px; /* ширина */ height:50px; /* высота */ background-color:red; /* цвет фона */ margin: 10px; /* отступ от других элементов */ }

    В данном случае селектором является div . Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д. При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет применяться ко всем элементам

    на веб-странице:

    Селекторы CSS

    Селекторы CSS

    Здесь на странице 3 элемента div, и все они будут стилизованы:

    Классы

    Иногда для одних и тех же элементов требуется различная стилизация. И в этом случае мы можем использовать классы.

    Для определения селектора класса в CSS перед названием класса ставится точка:

    RedBlock{ background-color:red; }

    Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинать название класса должно обязательно с буквы.

    Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.

    После определения класса мы можем его применить к элементу с помощью атрибута class . Например:

    Определим и используем несколько классов:

    Классы CSS

    Классы CSS

    Идентификаторы

    Для идентификации уникальных на веб-станице элементов используются идентификаторы, которые определяются с помощью атрибутов id. Например, на странице может быть головной блок или шапка:

    Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:

    Идентификаторы CSS

    Основное содержимое

    Однако стоит заметить, что идентификаторы в большей степени относятся к структуре веб-странице и в меньшей степени к стилизации. Для стилизации преимущественно используются классы, нежели идентификаторы.

    Универсальный селектор

    Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор , который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:

    *{ background-color: red; }

    Стилизация группы селекторов

    Иногда определенные стили применяются к целому ряду селекторов. Например, мы хотим применить ко всем заголовкам подчеркивание. В этом случае мы можем перечислить селекторы всех элементов через запятую:

    Селекторы CSS

    CSS3

    Селекторы

    Группа селекторов

    Некоторый текст...

    Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:

    H1, #header, .redBlock{ color: red; }

    В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые CSS-селекторы, которые поддерживает даже IE6, так и совсем новые CSS3-селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.

    1.

    * { margin: 0; padding: 0; }

    Начнем с самого простого, а потом уже перейдем к более продвинутым вещам.

    Этот CSS-селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит броузер.

    * также можно использовать для выделения дочерних элементов.

    #container * { border: 1px solid black; }

    В данном случае выделяться все дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.

    Совместимость

    • IE6 +
    • Firefox
    • Chrome
    • Safari
    • Opera

    2. #X

    container { width: 960px; margin: auto; }

    Знак решетки перед CSS-селектором Х выделит нам элемент с id = Х. Это очень просто, но будьте аккуратны при использовании id.

    Спросите себя: мне абсолютно необходимо выделение по id?

    id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов, названий тэгов или даже псевдо-классов.

    Совместимость

    • IE6 +
    • Firefox
    • Chrome
    • Safari
    • Opera

    3 .Х

    error { color: red; }

    Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.

    Совместимость

    • IE6 +
    • Firefox
    • Chrome
    • Safari
    • Chrome

    4. Х Y

    li a { text-decoration: none; }

    CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор.

    Не следует делать CSS-селекторы вида Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.

    Совместимость

    • IE6 +
    • Firefox
    • Chrome
    • Safari
    • Chrome

    5. X

    a { color: red; } ul { margin-left: 0; }

    Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {} .

    Совместимость

    • IE6 +
    • Firefox
    • Chrome
    • Safari
    • Opera
    a:link { color: red; } a:visted { color: purple; }

    Мы используем псевдо-класс:link, для выделения всех ссылок, на которые еще не кликнули.

    Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс:visited.

    Совместимость

    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Opera

    7. Х+Y

    ul + p { color: red; }

    Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.

    Совместимость

    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Chrome

    8. Х>Y

    div#container > ul { border: 1px solid black; }

    Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.

    • Элемент списка
      • Дочерний элемент
    • Элемент списка
    • Элемент списка
    • Элемент списка

    CSS-селектор #container > ul выберет только ul-ы, которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul-ы, являющиеся дочерними элементами первых li .

    Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.

    Совместимость

    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Opera

    9. Х ~ Y

    ul ~ p { color: red; }

    Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.

    Совместимость

    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Opera

    10. X

    a { color: green; }

    В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.

    Совместимость

    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Opera

    11. X

    a { color: #ffde00; }

    Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.

    Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на , а например на ? В этих случаях мы можем использовать регулярные выражения.

    Совместимость

    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Chrome

    12. X

    a { color: # 1f6053; }

    Совместимость

    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Opera

    13. X

    a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

    Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.

    “^” – наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.

    Обратите внимание, что мы не ищем “http://”. Это не правильно, поскольку не учитываются адреса, начинающиеся с https://

    А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.

    Совместимость

    • IE7 +
    • Firefox
    • Safari
    • Опера

    14. X

    a { color: red; }

    Опять же, мы используем символ регулярного выражения “$” для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит “.jpg”.

    Совместимость

    • IE7 +
    • Firefox
    • Safari
    • Опера

    15. X

    a{ color: red; }

    Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:

    A, a, a, a { color: red; }

    Но это неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?

    Ссылка на изображение

    A { color: red; }

    Совместимость

    • IE7 +
    • Firefox
    • Safari
    • Опера

    16. X

    a { color: red; } a { border: 1px solid black; }

    А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

    Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

    Click Me

    Вот, Html-код на месте, теперь напишем стили.

    Неплохо, да?

    Совместимость

    • IE7 +
    • Firefox
    • Safari
    • Опера

    17. X:checked

    input:checked { border:1px solid black; }

    Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.

    Совместимость

    • IE9 +
    • Firefox
    • Safari
    • Опера

    18. X:after

    Псевдоклассы:before и:after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.

    Многие познакомились с этими псевдоклассами при работе с clear-fix hack.

    Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

    Этот хак использует:after чтобы добавить пробел после элемента и запретить его обтекание.

    Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.

    Совместимость

    • IE8 +
    • Firefox
    • Safari
    • Опера

    19. X:hover

    div:hover { background: #e3e3e3; }

    Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS -селектор для вас.

    Имейте в виду, что старые версии Internet Explorer применяют:hover только к ссылкам.

    Этот CSS -селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.

    A:hover { border-bottom: 1px solid black; }

    border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;

    Совместимость

    • IE6 + (В IE6: hover должен быть применен к ссылке)
    • Firefox
    • Safari
    • Опера

    20. X:not(selector)

    div:not(#container) { color: blue; }

    Псевдокласс отрицания бывает очень полезным. Скажем, нужно выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!

    Или, если необходимо выбрать все элементы, за исключением p.

    *:not(p) { color: green; }

    Совместимость

    • IE9 +
    • Firefox
    • Safari
    • Опера

    21. X::псевдо элемент

    Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.

    Псевдо-элемент задается двумя двоеточиями: ::

    Выбираем первую букву в параграфе

    P::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right:2px; }

    Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.

    Выбираем первую строку в абзаце

    P::first-line { font-weight: bold; font-size: 1.2em; }

    Аналогичным образом благодаря::first-line мы задаем стиль первой строки в абзаце.

    “Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and:after) . Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации”

    Совместимость

    • IE6 +
    • Firefox
    • Safari
    • Опера

    22. X:nth-child(n)

    li:nth-child(3) { color: red; }

    Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!

    Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .

    Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0} .

    Совместимость

    • IE9 +
    • Firefox 3,5 +
    • Safari

    23. X:nth-last-child(n)

    li:nth-last-child(2) { color: red; }

    Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child .

    Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.

    Совместимость

    • IE9 +
    • Firefox 3,5 +
    • Safari
    • Опера

    24. X:nth-of-type(n)

    ul:nth-of-type(3) { border: 1px solid black; }

    Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.

    Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul , не имеющему уникального id , нужно использовать nth-of-type .

    Совместимость

    • IE9 +
    • Firefox 3,5 +
    • Safari

    25. X:nth-last-of-type(n)

    ul:nth-last-of-type(3) { border: 1px solid black; }

    Мы можем также использовать nth-last-of-type , отсчитывая элементы с конца.

    Совместимость

    • IE9 +
    • Firefox 3,5 +
    • Safari
    • Опера

    26. X:first-child

    ul li:first-child { border-top: none; }

    Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.

    Совместимость

    • IE7 +
    • Firefox
    • Safari
    • Опера

    27. X:last-child

    ul > li:last-child { color: green; }

    В противоположность :first-child:last-child выбирает последний дочерний элемент.

    Совместимость

    • IE9 + (Да да, IE8 поддерживает:first-child , но не поддерживает:last-child. Microsoft-у привет!)
    • Firefox
    • Safari
    • Опера

    28. X:only-child

    div p:only-child { color: red; }

    Вы не часто встретите этот псевдокласс, тем не менее он существует.

    Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:

    Один параграф.

    Два параграфа

    Два параграфа

    Будет выбран p только первого div`a, потому что он единственный дочерний элемент.

    Совместимость

    • IE9 +
    • Firefox
    • Safari
    • Опера

    29. X:only-of-type

    Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.

    Единственное решение заключается в использовании only-of-type .

    Ul > li:only-of-type { font-weight: bold; }

    Совместимость

    • IE9 +
    • Firefox 3,5 +
    • Safari
    • Опера

    30. X:first-of-type

    first-of-type выбирает первый элемент заданного типа.

    Чтобы лучше понять, приведем

    Параграф

    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4

    А теперь попытайтесь понять как выделить пункт 2.

    Решение 1

    Ul:first-of-type > li:nth-child(2) { font-weight: bold; }

    Решение 2

    P + ul li:last-child { font-weight: bold; }

    Решение 3

    Ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

    Совместимость

    • IE9 +
    • Firefox 3,5 +
    • Safari
    • Опера