Предыдущий элемент css: css — Селектор левых соседей

Похожие вопросы:

У меня возникли проблемы с получением элемента с помощью атрибута ‘style’ с selenium. Проблема в том, что с помощью селекторов xpath я могу это сделать:…

Мне интересно, есть ли какие-либо другие селекторы, которые выбирают только часть элемента HTML. Я знаю этих двоих: :first-letter :first-line Но AFAIK нет других селекторов, которые делают это. Меня…

Каковы наилучшие методы создания макетов CSS с меньшим количеством селекторов и меньшим количеством DIVs? Меньше селекторов означает меньше HTML и CSS, что облегчает управление. Как мы можем…

Я пытаюсь извлечь некоторые данные из страницы HTML, которая находится в строковой переменной. Я знаю, что код Google Apps Script JavaScript выполняется на стороне сервера, а объект document не…

Используя JQuery, как вы проверяете, является ли предыдущий брат элемента первым ребенком? Я попробовал следующий код, но он не работает: if( $(this). prev() === $(this).siblings(:first-child) ){…

У меня есть список и я хочу выбрать предыдущий и следующий из тех, на которых я зависаю <ul> <li>Item1</li> <li>Item1</li> <li>Item1</li>…

Я должен преобразовать приложение android в iOS, это приложение использует глубоко библиотеку jsoup и element.select(cssQuery) , чтобы найти элементы, начинающиеся с селекторов CSS. Изначально я…

У меня есть индикатор прогресса, который имеет двух детей (частей). Всякий раз, когда каждый из этих детей парит, общая высота прогресса и его детей будет меняться. Мне удалось решить для первых…

<div> <input type=text> <span id=ending_point> <label> <span> <input type=text id=starting_point> <span> </span> </span> </label>. ..

Я пытаюсь разобрать несколько селекторов CSS с помощью Boost Spirit X3. Если у меня есть следующее правило CSS, которое применяется, например, к нескольким IDs (селекторам) : #ID1, #ID2, #ID3 {…

JS JavaScript Элемент

CSS-селекторы для начинающих

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

Сейчас я постараюсь пролить немного света на эту тему. Однако скажу, что тут всё очень просто на самом деле — главное не стоит сразу же начинать разбираться с nth-child(even). Чтобы делать хорошую верстку, достаточно понять, как работают ID, классы и иерархия элементов.

Предлагаю вам на каждый из последующих примеров создать HTML-файл и пробовать все варианты сразу же по ходу дела. Тогда точно всё будет просто и понятно.

Пример 1. Селекторы по ID элемента

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

<em>Текст курсивом.</em>
<strong>Жирный текст.</strong>

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

/* чтобы обратиться к элементу с конкретным ID через CSS, добавим перед ним # */
#misha_em{
	color:#888; /* серый цвет для курсива */
}
#misha_strong{
	color:#fe0000; /* красный для жирного текста */
}

Как обратиться к нескольким элементам одновременно

Очень просто — перечислить их через запятую:

#misha_em, #misha_strong{
	text-tansform: uppercase; /* конечно мы недостаточно выделили наш текст, пусть еще будет в верхнем регистре */
}

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

Пример 2. Селекторы по классам

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

<em>Текст курсивом.</em>
<strong>Жирный текст.</strong>

Переделаем предыдущий пример и получим:

/* чтобы обратиться к элементам класса, добавим перед ним точку */
.misha_text{
	text-tansform: uppercase; /* оба элемента <em> и <strong> будут переведены в верхний регистр */
}

Также мы можем обратиться ко всем элементам жирного текста <strong> с классом .misha_text, добавив перед точкой название тега элемента:

/* обращаемся ко всем <strong> класса misha_text */
strong.misha_text{
	color:#fe0000;
}

Очень кратко про приоритеты

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

Тут может показаться, что элементу должен быть присвоен цвет #fe0000, так как это значение свойства указано в последнюю очередь, однако всё совсем не так.

.misha_text{
	color:#fff !important; /* если после значения свойства указать !important - это самый высочайший приоритет */
}
#misha_strong {
	color:#eee; /* у ID приоритет выше, чем у классов, это правило будет считаться важнее, чем .misha_text */
}
.misha_text{
	color:#fe0000;
}

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

Пример 3. Селекторы по HTML тегам. «Путешествие» по дереву DOM

Дерево — это иерархия всех HTML-тегов на странице.

Я предположу, что вы уже знаете парочку HTML-тегов, например то, что <div> — это просто блок, <ul> и <li> — элементы списка, <strong> — жирный текст, <p> — абзац.

<div>
	<ul>
		<li>Элемент списка 1</li>
		<li>Элемент списка 2</li>
		<li><strong>Жирный</strong> элемент списка 3</li>
	</ul>
</div>
<p><strong>Жирный текст внутри абзаца</strong></p>

К каждому из типов этих элементов можно обратиться по CSS, например:

div{
	background-color:#eee; /* ко всем div (а он у нас один в примере) будет применен светло-серый фон */
}
li{
	color:green; /* текст элементов списка станет зелёного о_О цвета */
}
strong{
	background-color:#ff0000; /* фон всех элементов strong станет красного цвета */
}

Думаю тут пока понятно, пишем название любого HTML тега в CSS и прописанные вами правила применятся для каждого указанного тега на вашей HTML-странице.

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

Тут нам поможет наследственность. В CSS мы можем указать полный путь к нужному нам элементу от самого начала документа, да хоть от самого <body>! Чтобы понять, о чем я говорю, смотрите пример:

/* это означает, что стили будут применяться ко всему жирному тексту, 
который находится внутри элемента <ul>, который в свою очередь находится внутри элемента <li>,
который в свою очередь находится внутри элемента <div>, и необязательно, чтобы эти элементы
шли друг за другом последовательно!!! то есть может быть и так: div p ol li ul li p strong */
div ul li strong{
	background-color:#ff0000;
}
/* ситуация точно такая же, необязательно элемент <strong> должен сразу идти после элемента <p>,
это может быть и: p span strong */
p strong{
	background-color:#aaa;
}

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

Для начала — зачем нам указывать полный путь к элементу, ведь достаточно и одного:

div strong{
	background-color:#ff0000;
}
p strong{
	background-color:#aaa;
}

Ну а теперь важное правило, если приоритет впереди стоящего селектора не выше, чем последующего, то к элементам применяются правила последующих селекторов.

/* сначала для всех <strong> делаем красный фон */
strong{
	background-color:#ff0000;
}
/* а потом перезаписываем правила для тех <strong>, которые находятся внутри абзацов <p> */
p strong{
	background-color:#aaa;
}

Вот и всё, в принципе информации из этого поста должно быть достаточно для создания верстки практически любой сложности. Тем не менее, я также выпущу вторую часть поста «Селекторы CSS для продвинутых» на следующей неделе.

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Глава 2 CSS

Как мы уже пояснили в предыдущей главе, элементы HTML позволяют сайтостроителям разметить документ в соответствии с его структурой. В спецификации HTML перечислены рекомендации по отображению браузерами этих элементов. К примеру, можно быть более-менее уверенным, что содержание контейнера strong будет отображено полужирным шрифтом. Вполне можно доверять и тому факту, что большинство браузеров отобразит содержимое контейнера h2 крупным шрифтом… по меньшей мере, крупнее, чем p, и крупнее, чем h3. Однако помимо веры и надежды на это, средств контроля за внешним видом текста у нас просто нет.

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

Правила и таблицы стилей

Для того, чтобы начать пользоваться CSS не нужно даже писать таблицы стилей. Шестнадцатая глава расскажет, как ссылаться на существующие в Сети таблицы.

Существуют два метода создания таблиц CSS. Можно либо воспользоваться обычным текстовым редактором и писать таблицы стилей «от руки», либо воспользоваться специальным инструментом, поддерживающим CSS, к примеру, приложением для веб-дизайна. Специальные инструменты позволяют создавать таблицы стилей без изучения синтаксиса CSS. Однако впоследствии дизайнеры во многих случаях предпочитают ручную отладку таблиц стилей, так что мы рекомендуем вам научиться писать и редактировать CSS от руки. Давайте приступим!

h2 { color: green }

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

Figure 2.1

Теперь давайте тщательно разберем правило.

Анатомия правила

Правило состоит из двух частей:

• Селектора — части перед левой фигурной скобкой
• Объявления — части внутри фигурных скобок

Селектор это звено, связующее HTML-документ и стиль. Оно устанавливает на какие элементы влияет объявление. Объявление это часть правила, которая определяет эффект. В примере выше селектор это тег h2, а объявление «color: green». Следовательно, объявление повлияет на все элементы h2, то есть, они позеленеют. (Свойство color влияет только на цвет текста; существуют другие свойства для фона, границ и т. д.)

Предыдущий селектор основан на типе элемента: он выбирает все элементы типа «h2». Этот вид селектора зовется селектором типа. Любой тип элемента HTML может быть использован в качестве селектора типа. Селекторы типа являются простейшим видом селекторов. Мы обсудим другие виды селекторов в See CSS selectors. , «CSS selectors.»

Анатомия объявления

Объявление имеет две части, разделенные двоеточием:

• Свойство — часть перед двоеточием
• Значение — часть после двоеточия

Свойство это качество либо характеристика, которыми нечто обладает. В предыдущем примере это color. CSS2 (см. separate box) определяет примерно 120 свойств и мы можем присвоить значения им всем.

Значение это точная спецификация свойства. В примере, это «green» «зеленый», но точно также цвет мог бы быть синим (blue), красным (red), желтым (yellow) или каким-нибудь еще.

Диаграмма ниже иллюстрирует все компоненты правила. Фигурные скобки ({ }) и двоеточие ( позволяют браузерам различать селектор, свойство и значение.

Рисунок 2.2 Диаграмма правила.

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

При создании CSS целью является сжатость. Мы отметили, что если уменьшить размер таблиц стилей, это позволит дизайнерам писать и редактировать их «от руки». К тому же короткие таблицы грузятся быстрее длинных. Поэтому в CSS есть несколько механизмов уменьшить размер таблиц стилей путем группировки селекторов и объявлений.

Для примера, рассмотрите эти три правила:

h2 { font-weight: bold }
h3 { font-weight: bold }
h4 { font-weight: bold }
     

У всех трех правил абсолютно одинаковое объявление они устанавливают шрифт полужирным. (Это делается с помощью свойства font-weight, которое мы обсудимв See Fonts. .) Поскольку все три объявления идентичны, можно сгруппировать селекторы в список, разделенный запятыми, и указать объявление лишь один раз, вот так:

h2, h3, h4 { font-style: bold }

Это правило производит такой же эффект, как и первые три..

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

h2 { color: green }
h2 { text-align: center }

В этом случае, мы устанавливаем все элементы h2 зелеными и центрированными на листе. (Это делается с помощью свойства text-align, которое мы обсудим в главе 5.)

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

h2 {
  color: green;
  text-align: center;
}

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

Теперь вы знаете основы создания правил CSS и таблиц стилей. Однако, мы еще не закончили. Чтобы таблица произвела какой-то эффект, ее придется «приклеить» к своему документу HTML.

«Приклеивание» таблиц стилей к документу

Чтобы заставить какую-либо таблицу стилей повлиять на документ HTML, ее нужно «приклеить» к нему. То есть, таблица и документ должны быть объединены, чтобы сработать вместе и представить документ. Это можно сделать любым из четырех способов:

1. Применить базовую, внутридокументную таблицу стилей, к документу, исп ользуя тег style .
2. Применить таблицу стилей к отдельному тегу, используя атрибут style.
3. Привязать внешнюю таблицу стилей к документу, используя элемент link.
4. Импортировать таблицу стилей, испольхуя запись CSS @import.

В следующем разделе, мы обсудим первый метод: с использованием тега style. Атрибут style мы обсудим в главе 4 , «Селекторы CSS», а использование элемента link element и записи @import в главе 16 , «Внешние таблицы стилей».

«Склеивание» с использованием тега STYLE

Можно склеить таблицу стилей и HTML документ, поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы позволить вставлять таблицы стилей внутрь HTML документов. Вот таблица стилей (полужирным шрифтом) прикрепленная к документу-образцу с использованием тега style. Результат показан в рисунке 2. 3 .

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    h2, h3 { color: green }
  </STYLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <h3>Historical perspective</h3>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>

Рисунок 2.3 Результат добавления к таблице стилей правила изменения цвета тегов h2 на зеленый и последующего прикрепления таблицы к документу с использованием контейнера style. (попробуйте)

Обратите внимание на то, что тег style размещен после тега title и перед тегом body. Заголовок документа «title» не появляется на самой странице, поэтому стили CSS не оказывают на него влияния.

Содержимое тега style это таблица стилей. Однако, в то время, как содержимое таких тегов, как h2, p и ul появляется на странице, содержимое тега style там не появляется. Точнее, на странице появляется эффект от содержимого контейнера style таблицы стилей. Поэтому вы не видите «{ color: green }», показанным на экране; вместо этого вы видите два тега h2 зеленого цвета. Правил, определяющих цвет прочих элементов, добавлено не было, так что все прочие элементы будут отображаться цветом по умолчанию.

Браузеры и CSS

Для обновляемого обзора доступных браузеров, просмотрите страницу обзоров W3C

Для того, чтобы CSS работала как написано в этой книге, необходимо использовать CSS-совместимый браузер, то есть, браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег style как контейнер для таблицы стилей и отображает документ соответственно. Многие браузеры, распространенные сегодня, поддерживают CSS, например, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5). По скромным подсчетам более половины пользователей Сети используют CSS-расширенные браузеры, и их число постоянно растет. Велика вероятность того, что люди, с которыми вы общаетесь, имеют CSS-расширенные браузеры. Если нет, дайте им причину обновиться!

Лучший источник информации о том, как различные браузеры поддерживают CSS WebReview’s charts

Увы, не все реализации CSS совершенны. Когда вы начнете экспериментировать с таблицами стилей, вы вскоре заметите, что каждый браузер имеет ряд багов и ограничений. В целом, новые браузеры ведут себя лучше старых. IE4 и O3.5 среди лучших, а следующее предложение Netscape под кодовым именем Gecko также обещает более усовершенствованную поддержку для CSS.

Те, кто не пользуется CSS-расширенными браузерами, все же могут читать страницы, использующие таблицы стилей. CSS заботливо спроектировали так, чтобы всё содержимое оставалось видимым, даже если браузер ничего не знает о CSS. Некоторые браузеры, такие как вторая и третья версии Netscape Navigator, не поддерживают таблицы стилей, но они знают о теге style чтобы полностью его игнорировать. После поддержки таблиц стилей, это и есть правильное поведение.

Однако другие браузеры, которые не поддерживают тега style, такие как Netscape Navigator 1 и Microsoft Internet Explorer 2, проигнорируют теги style, но покажут содержимое контейнера style. Таким образом, пользователь получит таблицу стилей напечатанной вверху страницы. В настоящий момент, лишь небольшой процент пользователей Сети может столкнуться с этой проблемой. Чтобы предупредить это, можно поместить свою таблицу стилей внутрь HTML-комментария, что мы обсудим в главе 1. Поскольку комментарии не отображаются на экране, поместив таблицу стилей внутрь HTML-комментария, вы не дадите старейшим браузерам показать содержимое контейнера style. CSS-расширенные браузеры учитывают этот трюк и расценят содержимое контейнера style как табицу стилей.

Вспомните, что комментарии HTML начинаются с <!-- и заканчиваются на -->. Вот кусочек предыдущего примерного кода, показывающий, как писать таблицу стилей в комментарии HTML. Комментарий окружает только содержимое контейнера style:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML>

В CSS также есть собственные способы комментирования, которые можно использовать внутри таблицы стилей. Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто знаком с языком программирования C, узнают его.) Правила CSS помещененные в комментарий CSS никак не повлияют на предсталение документа.

Браузеру необходимо сообщить, что вы работаете с таблицами стилей CSS. В настоящее время CSS единственный язык таблиц стилей, используемый с HTML-документами, и мы не думаем, что это скоро изменится. Для XML ситуация может быть и иной. Но точно так, как существует более одного формата изображений (сразу вспоминаются GIF, JPEG и PNG), может быть и больше одного языка таблиц стилей. Так что это хорошая привычка сообщать браузерам, что они работают с CSS. (К тому же, HTML этого требует.) Это делается с помощью атрибута type тега style. Значение type указывает, какой тип таблиц стилей используется. Для CSS значение будет «text/css». Нижеследующее отрывок из предыдущего документа-образца, показывающий, как лучше писать это (в сочетании с использованием комментариев HTML):

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML> 

Когда браузер загружает документ, он проверяет, сможет ли он понять язык таблиц стилей. Если сможет, он пытается прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе 1 обсуждение HTML-атрибутов) в теге style это способ дать браузеру понять, какой язык стилей используется. Атрибут type должен быть включен.

Чтобы облегчить чтение примеров, мы решили не заключать таблицы стилей в HTML-комментарии, но мы обязательно будем использовать атрибут type во всей книге.

Древовидные структуры и наследование

Вспомните из главы 1 обсуждение HTML, представляющего документ в виде древовидной структуры, и того, что элементы HTML имеют дочерние и родительские объекты. Есть много причин для создания древовидных документов. Для таблиц стилей есть одна очень хорошая причина: наследование. Как дети наследуют своих родителей, так и HTML-элементы. Только вместо наследования генов и денег, элементы HTML наследуют стилистические свойства.

Давайте начнем с того, что посмотрим на документ-образец.:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

Древовидная структура этого документа выглядит так:

Посредством наследования, значения свойств CSS присвоенные одному элементу, передадуться вниз по дереву его потомкам. Например, в наших образцах зеленый цвет до сих пор присваивается тегам h2 и h3. Теперь, скажем, нам нужно присвоить этот цвет всем элементам документа. Можно сделать это, перечислив все типы элементов в селекторе.:

<STYLE TYPE="text/css">
  h2, h3, P, LI { color: green }
</STYLE>

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

<STYLE TYPE="text/css">
  BODY { color: green }
</STYLE>

Поскольку прочие элементы наследуют свойства тега body, все они наследуют и зеленый цвет. (Рисунок 2.4 ).

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

Аннулирование наследования

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

<STYLE TYPE="text/css">
  BODY { color: green }
  h2 { color: navy }
</STYLE>

Раз тег h2 дочерний элемент тега body (и, следовательно, наследует body), эти два правила в таблице стилей выше несовместимы. Первое присваивает цвет содержимому тега body, а, значит, и цвет элементов h2 посредством наследования; в то время, как второе правило присваивает цвет исключительно тегу h2. Какое из них победит? Давайте узнаем:

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

Будь CSS языком програмирования, порядок, в котором определяются правила, определял бы, какое из них выиграет. Но CSS не язык программирования, и в примере выше порядок порядок не имеет значения. Результат был бы точно таким, используй мы эту таблицу стилей:

<STYLE TYPE="text/css">
  h2 { color: navy }
  BODY { color: green }
</STYLE>

CSS разработали так, чтобы разрешать противоречия между таблицами стилей как в примере выше. Конкретность один из аспектов этого. Детали можно найти в главе 15 , «Каскадирование и наследование.»

Свойства, которые не наследуются

В общем случае, свойства в CSS наследуются от родительского элемнта к дочернему, как описано в предыдущих примерах. Некоторые свойства, однако, не наследуются, и в этом всегда есть веская причина. Используем свойство background (описано в главе 11) как пример свойства, которое не наследуется.

Скажем, вам нужно установить фоновое изображение для страницы. Это обычный эффект в Сети. В CSS можно написать:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY {
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <h2>Bach's <EM>home</EM> page</h2>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

Свойство background «фон» имеет URL («texture.gif»), указывающий фоновое изображение в качестве значения. Когда изображение загружено, страница выглядит так:

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

• Фоновое изображение перекрывает поверхность наподобие обоев фоны элементов h2 и p также были перекрыты. Это не из-за наследования, причина в том, что если не определено иначе, все фоны прозрачны. Так что, раз мы не определили как-либо фоны для содержимого тегов h2 или p, фон родительского элемента body будет просвечивать.
• Вдобавок к URL изображения, в качестве фона также приваивается цвет (по умолчанию белый). Если изображение не будет найдено, вы увидите вместо него цвет.
• Цвет содержимого body установлен черным. Чтобы гарантировать контраст между текстом и фоном, хорошей привычкой будет всегда устанавливать свойство color когда устанавливаете свойство background.

А почему, собственно, свойство background не наследуется? Визуально, эффект от прозрачности подобен наследованию: выглядит так, будто все элементы имеют один и тот же фон. Есть две причины: во-первых, прозрачные фоны отображаются скорее (нечего отображать!), чем прочие фоны. Во-вторых, поскольку фоновые изображения выравниваются относительно элементов, к которым принадлежат, т.е. в ином случае вы бы не всегда наблюдали гладкие стыковки фона.

Стандартные задачи в CSS

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

Частые задачи: шрифты

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

h2 { font: 36pt serif }

Это правило присваивает определенный шрифт элементам h2. Первая часть значения 36pt устанавливает шрифт размером 36 пунктов. «Пункт» старая типографская единица измерения, которая здравствует и в цифровом веке. В следующей главе мы расскажем, почему стоит использовать единицу «em» вместо «pt» но пока что заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно использовать шрифт с серифами (маленькими засечками на концах шрифтов, глава 5 расскажет вам о них подробнее). Более декоративные шрифты с засечками лучше подходят домашней страничке Баха, поскольку современные санс-серифные шрифты (шрифты без засечек) не использовались в его время. Вот результат:

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

h2 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

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

UL { font-style: italic }

Свойство font-style не изменит размера шрифта либо семейство шрифтов, оно просто наклонит существующий шрифт. Когда оно присвоено элементу ul, содержимое тегов li внутри этого контейнера станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к тестовой странице, которые вы уже знаете.:

Похожим образом, свойство font-weight используется для изменения плотности толщины букв. Можно еще больше выделить пункты списка, присвоив их предку значение bold:

UL {
  font-style: italic;
  font-weight: bold;
}
     

Что выводит:

Последние свойства font-variant и line-height до сих пор не слишком широко поддерживаются браузерами, а потому не используются широко.

Частые задачи: поля

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

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

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was
      getting his flute ready, and his musicians
      were assembled, an officer brought him a
      list of the strangers who had arrived. With
      his flute in his hand he ran over the list,
      but immediately turned to the assembled
      musicians, and said, with a kind of
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

Скриншот внизу показывает, как типичный HTML-браузер отобразит этот документ:

Как можно видеть, браузер добавил пробелы со всех сторон цитируемого текста. В CSS эти пробелы называются «margins» «поля» и все элементы имеют поля со всех четырех сторон. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого контейнера blockquote, написав маленькую таблицу стилей:

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

Единица «em» будет подробно рассмотрена в следующей главе, но уже сейчас можно раскрыть ее секрет: она масштабирует относительно размера шрифта. Таким образом, код в примере выше создаст вертикальные поля такой же высоты, как и шрифт (1em) элемента blockquote, и горизонтальные поля с нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки будет отличаться, сделаем его курсивным. Результат таков:

Точно так же, как font укороченное свойство для установки нескольких шрифтовых свойств сразу, margin это укороченное свойство которое устанавливает все свойства полей. Поэтому пример вверху можно записать и как:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

Первая часть значения — 1em — присваивается верхнему полю (собственное свойство margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).

Поскольку левое поле равно нулю, цитируемому тексту нужно больше стиля, чтобы отделить его от остального текста. Установка в font-style значения italic помогает, а добавление фонового цвета еще больше усиливает цитату:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

Вот результат:

Как и ожидалось, фоновый цвет позади цитаты изменился. В отличие от предыдущих примеров, цвет определялся в частях красного-зеленого-синего (RGB от англ. red/green/blue) цветов. Цвета RGB детально описываются в главе 11 .

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

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

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

Обратите внимание, что свойству padding дано лишь одно значение (0.5em). Как и свойство margin, padding может принимать 4 значения, которые могут быть приписаны к верхнему, правому, нижнему и левому заполнению соответственно. Однако, когда одно и то же значение приваивается всем сторонам, единичное его упоминание сработает. Это справедливо и для padding и для margin (также как и для некоторых других свойств границ, которы описаны См. Промежутки вокруг блоков. ).

Частые задачи: ссылки

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

A:link { text-decoration: underline }

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

Ссылки подчеркнуты, как мы и указали, но они вдобавок синие, чего мы не указывали. Когда авторы не указывают все возможные стили, браузеры используют стили по умолчанию, чтобы заполнить пробелы. Взаимодействие между авторскими стилями, стилями по умолчанию и пользовательскими стилями (собственными предпочтениями пользователя) еще один пример противоречия между решающими правилами CSS. Это называется «каскадом»(«C» в «CSS»). Мы обсудим каскад ниже.

Селектор (A:link) заслуживает особого замечания. Вы, возможно, узнаете «A» как тег HTML, но последняя часть нова. «:link» это один из так называемых псевдо-классов CSS. Псевдо-классы используют, чтобы наделить стилем элементы, основанные на информации извне самого документа. К примеру, автор документа не может знать, перешли ли по определенной ссылке или нет. Детально псевдо-классы описываются в главе 4, а здесь мы лишь дадим еще несколько примеров:

A:visited { text-decoration: none }

Это правило присваивает стиль посещенным ссылкам, точно так, как A:link присваивает стиль непосещенным ссылкам. Вот пример посложнее:

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

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

У псевдо-класса :hover интересная история. Он появился в CSS2 после того, как соответствующий эффект стал популярен среди программистов JavaScript. Решение в JavaScript требует сложного кода по сравнению с псевдо-классами CSS, и это пример того, как CSS собирает эффекты, ставшие популярными среди Веб-дизайнеров.

Слово о каскадах

Фундаментальной чертой CSS является то, что более чем одна таблица стилей может повлиять на представление документа. Эта черта известна как каскадность, потому что различные таблицы стилей считаются идущими сериями. Каскадность является фундаментальной чертой CSS, потому что мы знаем, что любой документ вполне вероятно может получить таблицы стилей из многих исотчников: браузера, дизайнера и, возможно, пользователя.

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

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

Мы углубимся в детали каскадирования в главе 15, «Каскадирование и наследование». Перед этим, следует узнать многое о шрифтах, промежутках и цветах.

CSS-селектор :not. Полезные примеры

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

Например:

p:not(.classy) { color: red; }

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

Пример 1. Элемент без класса

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

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

ul li {  }

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

Мы ограничиваем область действия селектора:

.content ul li {  }

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content, где тоже используются ul li.

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

.textlist li {  }

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li, у которых нет никаких классов вообще:

ul:not([class]) li {  }

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

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

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.

ul:hover li {
  opacity:0.5;
}
ul:hover li:hover {
  opacity:1;
}

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

ul:hover li:not(:hover) {
  opacity:0.5;
}

Пример 3. Меню с разделителями между элементами

Пример

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

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY».

.menu-item:after {
  content: ' | ';
}
.menu-item:last-child:after {
  content: none;
}

Через :nth-last-child(). Одно правило, но тяжело читается.

.menu-item:nth-last-child(n+2):after {
  content: ' | ';
}

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child):after {
  content: ' | ';
}

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.

img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}


ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select,
textarea,
[type="text"],
[type="password"] {
    
}

С появлением новых типов полей в HTML5 этот список увеличился:

select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
  
}

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  
}

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not(). Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

Ссылка на родителя селектора | Документация по Sass на русском языке

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

scss

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

  &:hover {
    text-decoration: underline;
  }

  body.firefox & {
    font-weight: normal;
  }
}

a
  font-weight: bold
  text-decoration: none

  &:hover
    text-decoration: underline

  body.firefox &
    font-weight: normal

css

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

a:hover {
  text-decoration: underline;
}

body.firefox a {
  font-weight: normal;
}

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

scss

#main {
  color: black;

  a {
    font-weight: bold;

    &:hover {
      color: red;
    }
  }
}

#main
  color: black

  a
    font-weight: bold

    &:hover
      color: red

css

#main {
  color: black;
}

#main a {
  font-weight: bold;
}

#main a:hover {
  color: red;
}

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

scss

#main {
  color: black;

  &-sidebar {
    border: 1px solid; 
  }
}

#main
  color: black

  &-sidebar
    border: 1px solid

css

#main {
  color: black;
}

#main-sidebar {
  border: 1px solid;
}

Если суффикс не применим к родительскому селектору, Sass выдаст ошибку.

Noveo Блог • Краткий ликбез по локаторам в вебе

«Любишь UI-автотесты писать, люби и локаторы подбирать.» (с) Конфуций

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

Зачем это мне?

🔹 Если вы можете быстро найти локатор элемента, то репортить баги UI-части становится в разы проще. Вместо того, чтобы искать «красную кнопку ОК на странице авторизации пользователя в личный кабинет», разработчик вбивает в поиск «.btn.submit» и моментально находит элемент, для которого нужно сделать исправления.

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

🔹 Вообще механика работы веба — того, что мы, собственно, тестируем — становится намного понятнее, а работать с тем, что понимаешь, в разы приятнее. Кроме того, появляются новые идеи для проверок: а что будет, если мы уберем вот этот атрибут и попробуем ввести в поле невалидное значение? А если у кнопки стереть ‘disabled‘ и кликнуть на нее, что-то произойдет?

🔹 Можно открывать новые для себя направления деятельности: например, одна моя коллега не пишет UI-тесты, но редактирует код страниц и добавляет элементам data-test-* атрибуты. Это требует аналитического мышления, системного подхода и внимательности, а ещё позволяет поработать с кодом, но без написания автотестов (если вдруг вам их писать не очень хочется).

Короче, локаторы нужны и важны, а DevTools (F12 в большинстве браузеров) — наш лучший друг.

Что такое локаторы?

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

То есть если обычно вы видите кнопку «Login» и знаете, что надо нажать именно на нее, то в случае с автоматизацией браузеру надо дать команду «нажать», а еще обозначить, что именно жать. Собственно, чтобы взаимодействие браузера происходило с нужным вам элементом, а не соседним или вообще скрытым, и нужно умение писать уникальные локаторы. Еще хорошо, чтобы локаторы были читабельными — тогда вашим коллегам будет проще понимать, к чему именно вы обращаетесь (и что пошло не так в случае проблемы), но это уже, увы, не всегда зависит от QA.

Какие виды локаторов существуют?

Selenium WebDriver ищет элементы с помощью двух методов:

• Find Element
• Find Elements

Оба получают на вход параметры: объект класса By + тип запроса (по чему будем искать элемент) и сам локатор. Локатор должен соответствовать типу запроса: если ищем по атрибуту, то в локатор кидаем значение атрибута, если по СSS-селектору — то селектор. Если запрос будет вида

find_element(By.XPATH, "#login_form")

, то, разумеется, вместо рабочего теста мы получим ошибку.

Пара других различий, которые важно знать о методах Find Element и Find Elements:

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

• ID
• Name
• XPath
• Link text
• Partial link text
• Tag name
• Class name
• CSS selector

При этом ID, Name, Tag name и Class name — частные случаи CSS-селекторов. Таким образом, основные виды локаторов, с которыми мы будем сталкиваться — это CSS-селекторы и XPath. О них и поговорим ниже.

CSS Selector

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

Синтаксис:

• id (#uniqueid)
• tag (h2)
• name ([name=»my-element»])
• class (.class1.class2)
• другое значение атрибута ([attribute=»value»])
• текст в элементе: псевдокласс из jquery :contains()
• положение потомка: :nth-child(1)

Примеры использования:

• #test — поиск по ID «test»
• tag — поиск по тэгу «tag»
• .my-class — поиск по классу «my-class»
• .class1.class2 — поиск по классам «class1 class2» или «class2 class1» (обратите внимание, что порядок классов элемента не имеет значения при написании селектора)
• [name="my-name"] — поиск по имени «my-name»
• [attribute="value"] — поиск по значению «value» атрибута «attribute»
• a:contains("test") — поиск по тексту «test», который содержится в элементе
• #posts > .item:nth-child(2) > .title — составной селектор. Ищет элемент с классом title, который является потомком второго потомка элемента с классом item, который, в свою очередь, потомок элемента с ID = posts.

XPath

Поиск элемента(ов) с помощью запроса XPath (XML path) — языка разметки в XML-документе. Приятный момент работы с XPath: здесь, в отличие от селекторов, можно производить перемещение как в глубину DOM-иерархии, так и в обратную сторону (например, искать родительский элемент по дочернему).

Синтаксис:

• / — поиск прямого потомка
• // — поиск потомка любой степени
• [ ] — фильтрация
• Функция text() — поиск по тексту элемента
• Функция contains() — поиск полного или частичного совпадения
• Булевы операции and, or, not
• * — выбор всех элементов

Важный момент: XPath регистрозависим. То есть если запрос вида  //*[@class=”my-class”] находит элемент, то запрос вида //*[@Сlass=”my-Сlass”] тот же элемент не обнаружит.

Возможный вид запроса:

//корень(конкретный или *)/потомок[параметры фильтрации]

Примеры использования:

• //*[@class=”my-class”] — поиск по всем элементам, у которых есть класс «my-class».
• //div/p/a[text()=”Пример текста”] — поиск по всем элементам a, содержащим текст «Пример текста» и являющимся прямыми потомками элемента p, который прямой потомок элемента div.
• //*[@data-test=”select-button” or contains(@class, “login-button”)] — поиск по всем элементам, у которых есть data-test-атрибут со значением «select-button» ИЛИ у которых в имени класса есть «login-button».
• //div[1] — выбор первого потомка элемента div.

DevTools — наш друг

Чтобы искать элементы быстрее и убедиться, что написанный запрос вернет нам нужное количество элементов страницы, можно (и нужно) использовать DevTools. Они открываются по нажатию F12 или комбинации Ctrl+Shift+I. Во вкладке Elements можно посмотреть код страницы и скопировать уникальный локатор того или иного элемента. Еще пару лет назад таким образом возвращались трудночитаемые монстры, но браузеры умнеют (как и мы), и теперь часто Chrome возвращает отличные лаконичные локаторы.

Как же овладеть искусством поиска красивых локаторов? Практика, практика, практика!

Почитать (и потренироваться) дополнительно можно вот тут:

1. На официальном сайте Selenium.

2. В документации к Selenium для вашего языка программирования. Вот так выглядит вариант для Python: https://selenium-python.readthedocs.io/locating-elements.html

3. В других местах:

4. С готовыми подсказками по CSS-селекторам, XPath и многому другому интересному 😉

Если вы хотите лишний раз попрактиковаться в написании CSS-селекторов — часто используемых локаторов, — рекомендуем вам заглянуть на https://www.w3schools.com/css/exercise.asp и https://flukeout.github.io/.

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

• Выбрать туториал с любой формой из раздела Forms W3Schools (например, первый — Login Form).
• На странице туториала кликнуть кнопку Try it yourself.
• Скопировать код из левой части редактора и сохранить на вашем компьютере в формате HTML.
• Открыть сохраненную HTML-страницу и поискать для каждого элемента разного рода атрибуты и тэги.

А ещё очень рекомендуем обратить внимание на шаги 1.4 — 1.6 курса Автоматизация тестирования с помощью Selenium и Python и на модули 5 и 6 курса Веб-разработка для начинающих: HTML и CSS.

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

Надеюсь, этот ликбез оказался вам полезен! Всем интересных задач и красивых локаторов 🙂

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как сделать невозможное возможным в CSS, проявив немного творчества

by Facundo Corradini

Если вы когда-либо использовали родственные селекторы CSS, то знаете, что их всего два. Комбинатор родственников + выбирает первое совпадение, которое идет сразу после, а комбинатор последующих братьев ~ соответствует всем последующим.
Но нет возможности выбрать то, что было раньше. Ни родительские селекторы, ни селекторы предыдущих братьев и сестер просто не имеют значения.

Я знаю, что вы этого хотите, вы знаете, я хочу этого, но суровая правда в том, что их не существует (и, вероятно, никогда не будет). Есть миллион сообщений о том, почему. Есть даже предложения, как их реализовать. Но мы застряли в однонаправленной обработке правил CSS, скорее всего, чтобы защитить нас от «недостатка опыта», из-за которого мы застреваем в повторных потоках и даже в бесконечных циклах.

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

Первое, что нужно рассмотреть, — это почему мы хотим, чтобы предыдущие братья и сестры начинались с.
На ум приходят два случая:

1. Нам нужно выбрать всех братьев и сестер определенного элемента, а последующий комбинатор ~ выбирает только те, которые идут после.
2. Нам нужно выбрать только братьев и сестер, которые были до

1. Выбор всех братьев и сестер

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

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

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

Типичный вариант использования для этого — меню:

Приведенный выше код будет уменьшать непрозрачность всех < li> ele ment , кроме того, который завис.

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

С некоторым стилем это должно работать следующим образом:

Обратите внимание на : если вы собираетесь запустить подход pointer-events: none , имейте в виду, что это может испортить стекирование (может позволить вам выбирать элементы которые находятся «внизу» в порядке наложения). Это также не будет работать в IE10 и ниже, за исключением того, что вам могут понадобиться события указателя для чего-то еще.Так что будьте особенно осторожны при его использовании.

2. Выбор того, что было раньше.

Для этого варианта использования мы можем изменить порядок в HTML, затем отсортировать его обратно в CSS и использовать комбинатор последующих родственников ~ или селектор соседних братьев + . Таким образом, мы будем выбирать следующих братьев и сестер, но будет выглядеть так, как будто мы выбираем предыдущих.

Есть несколько способов сделать это. Самым простым и, вероятно, самым старым является изменение направления письма нашего контейнера:

Если ваши элементы должны отображать реальный текст, вы всегда можете отменить его обратно:

Но это может выйти из-под контроля разными способами.К счастью, современный набор инструментов CSS делает его намного проще и безопаснее. Мы можем просто использовать Flexbox в контейнере и изменить порядок с помощью flex-direction: row-reverse :

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

Использование «предыдущих братьев и сестер» для создания рейтинговой системы только для CSS

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

Итак, начнем с этого:

Как мы обсуждали ранее, элементы расположены в обратном порядке, что позволяет использовать селектор «предыдущий брат». Обратите внимание, что мы используем символ Юникода «белая звезда» (U + 2606) для обозначения пустых звезд.

Давайте отобразим их рядом, в правильном (обратном) порядке:

Теперь скройте сами переключатели, никто не хочет этого видеть:

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

Единственное действительно важное В строке стоит позиция : относительная .Это позволит нам абсолютно позиционировать псевдоэлемент с закрашенной звездой (U + 2605) поверх него, который изначально будет скрыт.

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

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

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

И последнее, но не менее важное: нам нужно «запомнить» текущий рейтинг на тот случай, если пользователь захочет его изменить. Например, если они выбрали пять звезд и по какой-либо причине хотят изменить их на четыре, мы должны отображать звезды с 1 по 4 заполненными, а пятая - полупрозрачной при наведении курсора на четвертую.

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

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

И вот она, кроссбраузерная, полностью функциональная система оценки звездочек только на CSS с использованием селекторов «предыдущие братья и сестры».

Как видите, то, что «это невозможно», не означает, что вам не следует пытаться. Программирование - это раздвигать границы. Так что всякий раз, когда вы ударяетесь о стену, просто нажимайте немного сильнее. Или я думаю, что это может быть лучшая аналогия? ... в любом случае, вы понимаете, о чем я.Продолжайте взламывать!

Примечание о специальных возможностях

Предыдущий фрагмент является упрощением для облегчения понимания. Это , а не , что я бы рекомендовал использовать на производстве из-за многих ограничений доступности.

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

Идентичные метки «☆» не имеют смысла для программ чтения с экрана, поэтому лучше всего будет иметь внутри метки an> с текстом «n звездочек», который будет скрыт от зрячих пользователей.

Также обратный исходный код HTML + display: row-reverse делает рейтинг клавиатуры неудобным, поскольку он не возвращается обратно. Доступность Flexbox и клавиатуры - довольно запутанная тема, но наиболее близким к ее решению является добавление тега aria-flowto к каждому элементу, что, по крайней мере, устраняет проблему для некоторых комбинаций программ чтения с экрана + браузер.

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

Использование предыдущего CSS «HACK» для создания анимационного звездного рейтинга

Прочтите статью полностью на Medium ...

Образовательные цели:

1. Объясните разницу между селектором CSS и комбинатором CSS
2. Сравните и сравните «Смежный родственный комбинатор» и «Общий родственный комбинатор»
3. Продемонстрируйте, как использовать flex-direction и hover для имитации предыдущего родственного комбинатора
4. Продемонстрируйте, как использовать clip-path для создания звезды

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

Предпосылки к этой статье

Эта статья является частью продолжающейся образовательной серии, которая будет преобразована в книгу с открытым исходным кодом и поэтому считается «живой статьей», которая может быть изменена. Если у вас есть вопросы, вы хотите внести свой вклад или просто поговорить о содержании, оставьте комментарий!

Если вы обнаружили ошибку, опечатку или хотите внести свой вклад непосредственно в эту книгу, вы можете отправить сообщение о проблеме:

Основы CSS в одном GIF

Мне нравится, чтобы мои сообщения были удобными для новичков, без ущерба для продвинутого содержания.Итак, вот гифка Умара Ханса, которая затрагивает некоторые из самых основных правил CSS. Попробуйте полную ссылку здесь.

Что мы будем строить сегодня

Посмотреть код.

Я просто шучу , кто я учитель JavaScript? Мы можем сделать лучше, чем это ... Итак, давайте погрузимся в:

Как это «взлом» CSS?

Нет, это не «взлом», нарушение закона о компьютерном мошенничестве, разновидность взлома. Это незаконных и мы здесь законопослушные граждане.

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

  Если это не «хак» CSS, то определенно волшебная звезда ...
  

звездный рейтинг только с CSS:

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

  Спойлер, мы жульничаем… и поэтому его «хак».
  

Так каковы же требования к звездочному рейтингу?

Обычно, когда вы видите эту проблему кодирования, она выглядит примерно так:

Компонент "Рейтинг" состоит из 5 звезд, каждая из которых представлена ​​элементом и хранится в родительском контейнере.

1. При щелчке по звездочному элементу или, в данном случае, при наведении указателя на звезду, цвет звезды должен измениться на «активный», и все начнется до того, как ее следует обновить, чтобы сделать то же самое.
2. Также звезды после желаемого рейтинга не должны иметь активного цвета.

Решение проблем с помощью CSS-селекторов, типов отображения и комбинаторов

CSS - это не язык программирования, это «язык таблиц стилей, используемый для описания представления документа, написанного на языке разметки, таком как HTML».

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

Используя псевдоселекторы, такие как: hover,: focus,: focus-within и: checked, мы можем имитировать поведение щелчка и касания элемента в объектной модели документа (DOM) или, проще говоря, визуализированном HTML.

Хорошо, что мы можем выполнить требование №2 достаточно легко. А как насчет требования №1.
Что ж… вот почему мы должны «обмануть», потому что на самом деле нет способа нацелить на предыдущего брата , мы можем нацеливаться только на родительский контейнер, потомок и их родственников каскадным образом.

  Вот почему он называется таблицей стилей CASCADING, а не таблицей стилей по возрастанию.
  

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

Переписка требований к правилам CSS

1. При наведении курсора на звездный элемент звезда должна быть изменена на «активный» цвет, и все начинающиеся после нее должны быть обновлены, чтобы сделать то же самое.
2. Кроме того, звезды перед желаемым рейтингом не могут быть стилизованы, поэтому мы бросаем детскую форму, переворачиваем чертову штуку вверх ногами и меняем порядок.
3. Обманывать пользователя (и читателя) и говорить, что это селектор «Предыдущий потомок».

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

Вариант 1. Дисплей Flex и направление гибкости

Поскольку я хочу показать его как строку, мы применим flex-direction: row-reverse; в класс .star-rating, чтобы изменить порядок каждого дочернего элемента.
Модель DOM не меняется. Мы просто меняем то, как мы это представляем.
Итак, наш документ, или HTML, записывается так:

CSS, применяемый в.star-rating class, изменит порядок каждого div на противоположный.

Затем изменим цвет звезды.
Для этого я собираюсь использовать: hover, чтобы изменить цвет выбранной звезды, и мы будем использовать общий родственный комбинатор CSS ~ вместо смежного родственного комбинатора +. Если бы мы использовали соседний комбинатор, нам пришлось бы написать:

  .star-rating .star: hover, // выбранная звезда
.star-rating .star: hover + .star, // младший брат после него
.star-рейтинг .star: hover +.звезда + .star, // и т. д.
.star-rating .star: hover + .star + .star + .star, // и т. д.
.star-rating .star: hover + .star + .star + .star + .star, // и т. д.
.star-rating .star: hover + .star + .star + .star + star + .star // и т. д.
{
  цвет фона: красный;
}
  

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

  .star-рейтинг .star: hover,
.star-rating .star: hover ~ .star {
  цвет фона: красный;
}
  

Это намного проще.

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

О Варианте 2 читайте в полной версии:

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

1. Прочтите полную статью в оригинале на Medium без стены, потому что мы друзья.И друзья, получите дружеские ссылки.
2. Вы можете внести свой вклад в эту книгу, прочитав / обсудив раздел Star-Rating.md. И, если хотите, отправьте PR, проблему и т. Д. На github и прочтите статью о уценке Star-Rating.md.

Селекторы братьев и сестер в CSS - Сообщество разработчиков

Трудно представить веб-сайт без CSS, а в наши дни - и без JavaScript. JavaScript дает сайту больше функциональных возможностей. Но если вы новичок, вы только начали свою карьеру веб-разработчика и у вас есть творческие идеи, но у вас нет знаний JavaScript, чтобы добавить некоторые из этих функций JavaScript в свой дизайн, поэтому здесь я объясняю вам одну из этих идей, например переключаемое меню или скользящее меню панели задач, или карусельная галерея, или отзывы и все такое, что вы видели, но никогда не пробовали создавать с помощью JavaScript.
Итак, здесь я объясню вам о селекторах элементов-родственников CSS Next и Previous (да PREVIOUS).
Давайте сначала поговорим о селекторах следующих братьев и сестер: -

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

Как вы можете видеть в приведенном выше фрагменте, между тегами h2 и p находится знак + , здесь p является смежным с h2 .Итак, теперь, если вы наведете курсор на h2, вы увидите изменение свойств тега p .

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

Как вы можете видеть в приведенном выше фрагменте, между тегами h2 и p есть вход ~ , но между тегами h3 есть еще один родственный тег, но это не повлияет, и вы можете изменить свойства Тег p , хотя p не является следующим соседним родственником h2 .
При желании вы также можете изменить свойства h3 , который находится между h2 и p , а также изменить свойства тега p .

До сих пор мы говорили о соседних селекторах, но как насчет предыдущих родственных селекторов?
К сожалению, в CSS у нас нет таких предыдущих одноуровневых селекторов, но да, в ax (ACSSSS) - синтаксисе расширенной каскадной таблицы стилей у нас есть предыдущие или предшествующие одноуровневые селекторы.

При использовании ACSSSS не забудьте добавить эту библиотеку в свой html файл: -

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

Как вы можете видеть в приведенном выше фрагменте, существует ? войдите между тегами p и h2 , здесь h2 является непосредственным предшествующим родственником p . Итак, теперь, если вы наведете курсор на тег p , вы увидите изменения в теге h2 .

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

Как вы можете видеть в приведенном выше фрагменте, это ! войдите между тегами p и h2 , но между тегами h3 есть еще один родственный тег, но он не повлияет, и вы можете изменить свойства тега h2 , хотя h2 не предшествует непосредственно брат p tag.
При желании вы также можете изменить свойства h3 , который находится между h2 и p , а также изменить свойства тега p . Это будет более понятно на примере ниже: -


Чтобы узнать больше о дизайне, относящемся к этой теме, посмотрите мои ручки на CodePen.

Спасибо, что прочитали, это моя первая статья.

Любая обратная связь будет принята с благодарностью.

Свяжитесь со мной в Twitter или LinkedIn

[100% рабочий код] Есть ли CSS-селектор «предыдущий брат»

  {
    красный цвет;
    выравнивание текста: центр;
}  

  

    
 А 
    
 Б 
  

  ul
{дисплей: гибкий;
}  

  

   
 Б 
   
 А 
  

  li: hover + li
{
цвет фона: красный;
}  

  li: last-child
{
заказ: -1;
}  

  ul li: not (: nth-child (n + 3))  

  ul li: nth-child (-n + 2)  

  / * по умолчанию цвет ссылки синий * /
.parent {цвет: синий; }
/ * предыдущие братья и сестры должны быть красными * /
.parent: наведите указатель мыши на {цвет: красный; }
 .parent a: hover,
 .parent a: hover ~ a {цвет: синий; }

  ссылка 
 ссылка   ссылка   ссылка   ссылка  
  

  el1 + el2
{
цвет: # f0f;
}  

  el1 - el2
{
цвет: # f0f;
}  

  label - input [type = "checkbox"]
{
заказ: -1;
}  

  


Текст ярлыка


  

  el1 - ~ el2
{
цвет: # f0f;
}  

  
 Какого я цвета? 
  

  .foo [style * = "color: red"] {
  цвет: огнеупорный кирпич! важно;
}
  

  #someElement p {
  цвет синий;
}

p.awesome {
  красный цвет;
}  

  table td {height: 50px! Important; }
.myTable td {height: 50px! important; }
#myTable td {height: 50px! important; }
  

  td {height: 50px! Important; }  

  [id = "someElement"] p {
  цвет синий;
}

p.awesome {
  красный цвет;
}  

  div.outer p {
  оранжевый цвет;
}

div: not (.outer) p {
  цвет: сине-фиолетовый;
}
  

  

  
 Это во внешнем div.
  

    
 Этот текст находится во внутреннем div. 
  

  

  div: где (.outer) p {
  оранжевый цвет;
}

div p {
  цвет: сине-фиолетовый;
}
  

  

  
 Это во внешнем div. 
  

    
 Этот текст находится во внутреннем div. 
  

  

  * # foo {
  цвет: зеленый;
}

* [id = "foo"] {
  цвет: фиолетовый;
}
  

  
 Я образец текста 
  

  кузов h2 {
  цвет: зеленый;
}

html h2 {
  цвет: фиолетовый;
}
  

  
  
     
 Вот название! 
 

  

  #parent {
  цвет: зеленый;
}

h2 {
  цвет: фиолетовый;
}  

  
  
     
 Вот название! 
 
  
  

 <родитель>
    <ребенок> 
    <ребенок> 
 

 (2 * 0) +4 = 4
(2 * 1) +4 = 6
(2 * 2) +4 = 8
(2 * 4) +4 = 10 

 .item: nth-last-child (-n + 2) 

 .image {
  нижнее поле: 2 бэр;

  &:последний ребенок {
    нижнее поле: 0;
  }
} 

 .image {
  нижнее поле: 2 бэр;
}

.image - last {
  нижнее поле: 0;
} 

 .image: not (: last-child) {
  нижнее поле: 2 бэр;
} 

 

  
    Элемент, который завис
     Это дочерний элемент, CSS может стилизовать его 
  
   Это родственник, CSS может стилизовать его 
  "Родительский" 
 не может быть стилизован с помощью CSS, когда  наведен
 

  h2 + P {margin-top: 0;}
  

  EM + STRONG {цвет: зеленый;}
  

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

 

 
 Эй, элемент h4 
 
Вот текст, который является частью DIV,
и не содержится в его дочернем элементе.
 Вот короткий абзац 

 
 

  h4 + P {цвет: серый;}
  

  DIV h4 + P {цвет: серый;}
  

  DIV> h4 + P {цвет: серый;}
  

  DIV> h4 + * {цвет: серый;}
  

  ТАБЛИЦА + DIV.aside * {color: gray;}
ТАБЛИЦА + DIV.aside A: ссылка {color: # 444; оформление текста: подчеркивание;}
  

  h2 + P {стиль шрифта: курсив; размер шрифта: 150%;}
  

  h2.заголовок + P {стиль шрифта: курсив; font-size: 150%;} 
 

  LI + LI {цвет: серый; размер шрифта: 90%;} 
 

  h2, h3, h4 {margin-bottom: 0,125em;}
h2 + *, h3 + *, h4 + * {margin-top: 0,125em;}