Будьте в курсе последних событий, подпишитесь на обновления сайта

Глава 2. Селекторы

Каскадность стилей

Здравствуйте! На прошлом уроке мы рассмотрели такое понятие как наследование стилей. Сегодня рассмотрим что такое каскадность в CSS.

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

 

Читать далее

Наследование стилей

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

наследование стилей

Читать далее

Селекторы атрибутов

Здравствуйте! Кроме css селекторов элементов мы также можем использовать селекторы их атрибутов. Например, у нас есть на веб-странице несколько полей input, а нам надо окрасить в красный цвет только текстовые поля. В этом случае мы как раз можем проверять значение атрибута type: если оно имеет значение text, то это текстовое поле, и соответственно его надо окрасить в красный цвет. Определение стиля в этом случае выглядело бы так:

input[type="text"]{
     
    border: 2px solid red;
}

селекторы атрибутов

Читать далее

Псевдоэлементы

Здравствуйте! Псевдоэлементы обладают рядом дополнительных возможностей по выбору элементов веб-страницы и похожи на псевдоклассы. Список доступных псевдоэлементов:

  • ::first-letter: позволяет выбрать первую букву из текста
  • ::first-line: стилизует первую строку текста
  • ::before: добавляет сообщение до определенного элемента
  • ::after: добавляет сообщение после определенного элемента
  • ::selection: выбирает выбранные пользователем элементы

Псевдоэлементы

Читать далее

Псевдоклассы форм

Здравствуйте! В прошлом уроке мы рассмотрели псевдоклассы дочерних элементов. В этом уроке разберем псевдоклассы форм.

Ряд псевдоклассов используется для работы с элементами форм:

  • :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)
  • :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)
  • :checked: выбирает элемент, если у него не установлен атрибут checked (для флажков и радиокнопок)
  • :default: выбирает элементы по умолчанию
  • :valid: выбирает элемент, если его значение проходит валидацию HTML5
  • :invalid: выбирает элемент, если его значение не проходит валидацию
  • :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)
  • :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне
  • :required: выбирает элемент, если у него установлен атрибут required
  • :optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы форм

Читать далее

Псевдоклассы дочерних элементов

Здравствуйте! Особую группу псевдоклассов образуют псевдоклассы, которые позволяют выбрать определенные дочерние элементы:

  • :first-child: представляет элемент, который является первым дочерним элементом
  • :last-child: представляет элемент, который является последним дочерним элементом
  • :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере
  • :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере
  • :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент
  • :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца
  • :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер
  • :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

псевдоклассы дочерних элементов

Читать далее

Псевдоклассы

Здравствуйте! В дополнение к css селекторам тегов, классов и идентификаторов нам доступны селекторы псевдоклассов, которые несут дополнительные возможности по выбору нужных элементов.

Список доступных псевдоклассов:

Псевдоклассы CSS

Читать далее

Селекторы элементов одного уровня

Селекторы элементов одного уровня или смежных элементов позволяют выбрать элементы, которые находятся на одном уровне вложенности. Иногда такие элементы еще называют сиблинги (siblings) или сестринскими элементами.

Селекторы элементов одного уровня

 

Читать далее

Селекторы дочерних элементов

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

<body>
    <h2>Заголовок</h2>
    <div>
        <p>Текст</p>
    </div>
</body>

Седекторы дочерних элементов

Читать далее

Селекторы потомков

Здравствуйте! Продолжаем изучение css селекторов и на очереди селекторы потомков.

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

Селекторы потомков

Читать далее

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: