А теперь попытайтесь понять как выделить пункт 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
• Опера

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

Пример 17.1. Стиль для каждого селектора

H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; } H2 { font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #333; } H3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #900; } P { font-family: Times, serif; }

Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2.

Пример 17.2. Сгруппированные селекторы

H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; } H1 { font-size: 160%; color: #003; } H2 { font-size: 135%; color: #333; } H3 { font-size: 120%; color: #900; }

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

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

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

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

Вопросы для проверки

1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?

Bgzapas, .button, h1 { font-size: 1.2em; padding: 10px; background-color: #fcfaed; } .bgzapas { background-color: #e7f2d7; } .button, h2 { width: 95px; font-size: 11px; color: #f3fced; background-color: #5ca22e; } .bgzapas, .button { background-color: #d9d7f2; }

1. #fcfaed
2. #e7f2d7
3. #f3fced
4. #5ca22e
5. #d9d7f2

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

Селекторы в CSS

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

P{
Стили…
}

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой . Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
Table{} – стили для всех таблиц
Li{} – стили для всех пунктов списка
A{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = “about”
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = “down”
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = “float”

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

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

Задается он так:

Абзац

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{
Font-size: 22px
}

Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

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; } // echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?> Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Рассмотрим их в статье подробнее. Некоторые селекторы поддерживаются всеми браузерами, некоторые только самыми новыми версиями браузеров. 1. * — выделение всех элементов * { margin: 0; padding: 0; } Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding . На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер. Его также можно использовать для выделения всех дочерних элементов, определенного контейнера. #container * { border: 1px solid black; } В данном случае выделяться все дочерние элементы блока #container . Старайтесь не злоупотреблять им. Совместимость IE6 + Firefox Chrome Safari Opera 2. #X #container { width: 960px; margin: auto; } Знак решетки перед CSS-селектором выделит нам элемент с id="container" . Это очень просто, но будьте аккуратны при использовании id. Спросите себя: мне абсолютно необходимо выделение по id? id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов class="" , названий тэгов или даже псевдо-классов. Совместимость 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: 1pxsolidblack; } Разница между стандартными Х 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-селекторы. Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения. Совместимость IE7 + Firefox Chrome Safari Chrome 12. X a { color: # 1f6053; } Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, http://yandex.ru/somepage и т.д. Совместимость 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: 1pxsolidblack; } А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой. Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение. " Click Me Вот, Html-код на месте, теперь напишем стили. Неплохо, да? Совместимость IE7 + Firefox Safari Опера 17. X:checked input:checked { border:1pxsolidblack; } Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто. Совместимость 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: 1pxsolidblack; } 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: 1pxsolidblack; } Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа. Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type. Совместимость IE9 + Firefox 3,5 + Safari 25. X:nth-last-of-type(n) ul:nth-last-of-type(3) { border: 1pxsolidblack; } Мы можем также использовать 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 Опера Понравилась статья? Инженерное меню на Андроид – разбираемся в деталях Обзор Samsung Galaxy А5 (2016): удачное перерождение Технические характеристики телефона самсунг галакси а5 Выбор комплектующих для хакинтоша The crew через uplay не запускается Как увеличить чувствительность антенны Увеличить мощность антенны смартфона Краткая информация об игре Mhotspot установка и настройка Avp exe: что за процесс, зачем он нужен и как его удалить? Как конвертировать графический файл BMP в JPG и наоборот JPG в BMP? Спасибо! Ваше сообщение отправлено.