Css все элементы внутри div. CSS Selectors

Детские товары 28.04.2019
Детские товары

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

  • Селектор - это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,

    или и т.д.
  • Свойство - это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
  • Значение - задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.
  • Синтаксис селекторов в CSS следующий:

    Селектор { свойство: значение }

    Пример. Вы можете задать границу таблицы следующим образом:

    Table { border: 2px solid #FF8C00; }

    Здесь синтаксис селектора такой: table - это селектор, а border - свойство, а 2px solid #FF8C00 - значение этого свойства.

    Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.>

    Стандартные селекторы

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

    H1 { color: #8B4513; }

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

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

    * { color: #808080; }

    Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

    Селекторы потомков или вложенные селекторы

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

      .

      Ul em { color: #CD5C5C; }

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

      Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

      Blue { color: #0000FF; }

      class="blue" . Вы можете сделать селектор класса немного более конкретным. Например:

      H1.blue { color: #0000FF; }

      с атрибутом class="blue" .

      Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

      Этот абзац будет оформлен классами center и bold .

      ID селекторы

      Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

      #blue { color: #0000FF; }

      Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id="blue" . Вы можете сделать id селектор немного более конкретным. Например:

      H1#blue { color: #0000FF; }

      Это правило отображает содержимое в синем цвете только для элементов

      с атрибутом id="blue" .

      Истинная мощность id селекторов - это когда они используются в качестве основы для селекторов-потомков, например:

      #blue h2 { color: #0000FF; }

      В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id="blue" .

      Дочерние селекторы

      Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:

      Body > p { color: #0000FF; }

      Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом . Другие абзацы, помещенные внутри других элементов типа

      или

    Соседние селекторы

    HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:

    Strong + em { color: #0000FF; }

    Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.

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

    Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:

    Input { color: #0000FF; }

    Преимущество использования селекторов атрибутов заключается в том, что элемент не изменяется, а цвет применяется только к нужным текстовым полям.

    Для селектора атрибутов применяются следующие правила:

    • p - выбирает все элементы абзаца с атрибутом lang.
    • p - выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
    • p - выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
    • p - выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».

    Несколько правил стиля

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

    H1 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; }

    Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

    Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

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

    Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как показано в следующем примере:

    H1, h2, h3 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; }

    Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

    Вы можете группировать различные id селектора вместе, как показано ниже:

    #header, #content, #footer { position: absolute; width: 300px; left: 250px; }

    Последнее обновление: 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 и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

    Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

    P {color: red} div span {background: green} ul li {list-style: none}

    Селекторы class и id

    В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

    текст в первом диве
    текст во втором диве
    текст в третьем диве

    На что стоит обратить внимание:

    • Классы и идентификаторы можно присваивать любым (всем) тегам.
    • Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
    • Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
    • Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
    • Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

    Как обратиться к классу или id в файле стилей (CSS)?

    Смотрим пример:

    #first {color: red;} /* обращаемся к id с именем first */ .second {color: blue;} /* обращаемся к классу с именем second */ #first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */ .first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

    В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

    Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

    В чём различие class и id?

    Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

    текст в диве

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

    По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

    Myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */ div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

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

    текст

    Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

    Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

    Родственный селектор

    Div p {color: green;} /* Селектор по потомку */ p {color: red;} /* селектор по тегу */

    Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

    Третий уровень

    Прямой наследник (первый уровень)

    Второй уровень

    Прямой наследник (первый уровень)

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

    Div>p {color: blue;} /* только первый уровень вложенности */ div p {color: blue;} /* абсолютно все параграфы внутри div */

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

    С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

    * {margin: 0; padding: 0;}

    Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

    Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

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

    В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся (:first-child, :link, :visited, : lang()):

    Прямой наследник (первый уровень)

    Третий уровень

    Прямой наследник (первый уровень)

    Второй уровень

    Прямой наследник (первый уровень)

    Результат:

    Естественно можно комбинировать селекторы как захотим, например:

    Div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

    Название представленного выше псевдо-класса говорит само за себя first-child - первый ребёнок.

    Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

    A:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */ a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет красным, убираем подчёркивание */

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

    Q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */ q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */ q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

    Динамические псевдо-классы

    Динамические псевдо-классы – это:active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

    P:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */ input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */ div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

    Примените данные стили к нашему примеру выше, и вы сами всё увидите.

    Смежные селекторы

    Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

    текст в параграфе первого div

    текст в параграфе ВНЕ div

    текст в параграфе второго div

    текст в спане

    снова параграф вне div

    Результат:

    Обобщённые смежные селекторы

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


    текст в диве

    параграф

    параграф

    параграф


    текст в спане

    параграф

    параграф


    параграф в диве

    параграф в диве


    текст в спане

    параграф

    Результат:

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

    Селекторы атрибутов позволяют нам обратиться к тегам, имеющим необходимый нам атрибут или даже конкретное его значение:

    P {свойства} /* применить ко всем тегам p, у которых есть атрибут align */ p {свойства} /* где значение атрибута align равно center */ p {свойства} /* где значение атрибута align начинается на center */ p {свойства} /* где значение атрибута align содержит center */ p {свойства} /* где site может находиться среди других слов, отделенных пробелами () */ p {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения ( или ) */ p {свойства} /* где значение атрибута align заканчивается на center */

    CSS 3 псевдо-классы

    Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

    :last-child – аналог:first-child, только берёт не первого, а последнего ребёнка.

    :only-child – сработает, если элемент (тег) является единственным ребёнком.

    :only-of-type - сработает, если элемент (тег) является единственным ребёнком своего типа.

    :nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:


    параграф

    параграф

    параграф


    текст в спане

    параграф

    параграф

    параграф

    параграф

    параграф

    параграф

    Результат:

    :nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

    :first-of-type – первый ребёнок своего типа в рамках прямого родителя.

    :last-of-type – последний ребёнок своего типа в рамках прямого родителя.

    :empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

    :not() – делает исключение для заданных элементов. Пример:


    параграф с классом roll


    параграф

    параграф


    параграф с классом roll

    Результат:

    Управление полями, формами, переключателями и флажками в CSS

    :enabled - применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

    :disabled - применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

    :checked – применяется к элементам интерфейса типа флажки (radio) и переключатели (checkbox), когда они находятся во включённом положении.

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

    Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

    :first-line – первая строка внутри блочного или табличного элемента.

    :first-letter – первая буква внутри блочного элемента.

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

    Преимущества оптимизации HTML за счёт CSS

    Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

    Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

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

    Поскольку мы не хотим стилизовать все наши элементы HTML одновременно, нам требуется возможность выбрать подмножество этих элементов.

    Селекторы CSS определяют, к каким элементам мы хотим применить стиль.

    Базовые селекторы тегов

    Нацелиться на базовые теги HTML легко: просто используйте имя тега.

    Есть прямая связь между именем тега HTML и используемым селектором CSS.

    Классы

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

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

    Date { color: red; }

    С другой стороны есть атрибут HTML class со значением date . Он должен совпадать с именем класса CSS.

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

    Селектор класса .date будет нацелен на все элементы HTML с атрибутом class="date" . Таким образом, следующие элементы HTML все будут стилизованы:

    Мероприятие произойдёт в субботу.

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

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

    Можно также использовать атрибут id в вашем HTML и определить его в вашем CSS с помощью решётки:

    #tagline{ color: orange;}

    Этот заголовок будет оранжевым.

    Идентификаторы похожи на классы, так как они тоже основаны на атрибуте HTML.

    Пример

    Объединение селекторов

    Давайте воспользуемся нашим предыдущим примером, в котором мы хотим сделать наши даты красными:

    Мероприятие произойдёт в субботу.

    Если мы захотим вместо этого, чтобы наши даты внутри отображались синим цветом? Мы можем добавить следующее правило CSS:

    Em.date { color: blue; }

    em.date объединяет в себе:

    • селектор тега em ;
    • селектор класса .date .

    Он будет применяться только к элементам . Это не повлияет на другие .date или .

    Иерархия селекторов

    Пробел в селекторе определяет отношение предок/потомок. Скажем, мы хотим, чтобы ссылки в нашем заголовке были красного цвета:

    Header a { color: red; }

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

    Элементы HTML могут иметь разные состояния. Наиболее распространённый случай - когда вы наводите курсор на ссылку. В CSS возможно применить другой стиль, когда происходит такое событие.

    Псевдоклассы привязаны к обычным селекторам и начинаются с двоеточия.



    Рекомендуем почитать

    Наверх