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

Содержание

Выберите предыдущий брат элемента в CSS с помощью селекторов



Возможный Дубликат:
CSS предыдущий селектор братьев и сестер

Как выбрать вышеприведенный элемент элемента в CSS с помощью селекторов

<li>One</li>
<li>Two</li>
<li>Three</li>
<li>First</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>

Здесь я хочу использовать класс no-content, так что я могу получить его выше элемента <li>Three</li> , используя селектор CSS.

css css-selectors
Поделиться Источник Justin John     04 апреля 2012 в 06:56

2 ответа


  • Разбор строки HTML с помощью селекторов CSS

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

  • JQuery: проверьте, является ли предыдущий брат или сестра первенцем

    Используя JQuery, как вы проверяете, является ли предыдущий брат элемента первым ребенком? Я попробовал следующий код, но он не работает: if( $(this).prev() === $(this).siblings(:first-child) ){ //do something } Пример использования приведенного выше подхода === : http://jsfiddle.net/xnHfM /



34

Это невозможно с чистым CSS...

Поделиться Gatekeeper     04 апреля 2012 в 07:00


Поделиться Rohit Azad     04 апреля 2012 в 07:10


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


проблема: переход к элементу с помощью атрибута CSS селекторов 'style' с selenium

У меня возникли проблемы с получением элемента с помощью атрибута 'style' с selenium.

Проблема в том, что с помощью селекторов xpath я могу это сделать:...


текст селекторов в css

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


Создание макетов CSS с меньшим количеством селекторов?

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


Разбор строки HTML с помощью селекторов CSS

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


JQuery: проверьте, является ли предыдущий брат или сестра первенцем

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

prev() === $(this).siblings(:first-child) ){...


CSS: выберите предыдущий брат или сестра

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


Чтение DOMDocument и поиск элементов с помощью селекторов CSS

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


CSS выберите предыдущий брат или сестра

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


Как найти первого предка элемента, чей родной брат является определенным элементом в jquery?

<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 с помощью Boost Spirit X3. Если у меня есть следующее правило CSS, которое применяется, например, к нескольким IDs (селекторам) : #ID1, #ID2, #ID3 {...

JS JavaScript Элемент

Свойство / Метод Описание
accessKey Задает или возвращает атрибут AccessKey элемента
addEventListener() Присоединяет обработчик событий к указанному элементу
appendChild() Добавляет новый дочерний узел к элементу в качестве последнего дочернего узла
attributes Возвращает намеднодемап атрибутов элемента
blur() Удаление фокуса из элемента
childElementCount Возвращает количество дочерних элементов, которые имеет элемент
childNodes Возвращает коллекцию дочерних узлов элемента (включая узлы текста и комментария)
children Возвращает коллекцию дочернего элемента элемента (исключая текстовые и комментарии узлы)
classList Возвращает имя (имена) класса элемента
className Задает или возвращает значение атрибута Class элемента
click() Имитирует щелчок мышью по элементу
clientHeight Возвращает высоту элемента, включая заполнение
clientLeft Возвращает ширину левой границы элемента
clientTop Возвращает ширину верхней границы элемента
clientWidth Возвращает ширину элемента, включая заполнение
cloneNode() Клонирование элемента
compareDocumentPosition() Сравнивает положение документа двух элементов
contains() Возвращает значение true, если узел является потомком узла, в противном случае — false
contentEditable Задает или возвращает ли содержимое элемента редактируемым или нет
dir Задает или возвращает значение атрибута DIR элемента
firstChild Возвращает первый дочерний узел элемента
firstElementChild Возвращает первый дочерний элемент элемента
focus() Придает фокус элементу
getAttribute() Возвращает указанное значение атрибута узла элемента
getAttributeNode() Возвращает указанный узел атрибута
getElementsByClassName() Возвращает коллекцию всех дочерних элементов с указанным именем класса
getElementsByTagName() Возвращает коллекцию всех дочерних элементов с указанным именем тега
hasAttribute() Возвращает значение true, если элемент имеет указанный атрибут, в противном случае false
hasAttributes() Возвращает значение true, если элемент имеет какие-либо атрибуты, в противном случае false
hasChildNodes() Возвращает значение true, если элемент имеет дочерние узлы, в противном случае — false
id Задает или возвращает значение атрибута ID элемента
innerHTML Задает или возвращает содержимое элемента
innerText Задает или возвращает текстовое содержимое узла и его потомков
insertAdjacentElement() Вставляет элемент HTML в заданной позиции относительно текущего элемента
insertAdjacentHTML() Вставляет HTML-форматированный текст в заданной позиции относительно текущего элемента
insertAdjacentText() Вставка текста в заданную позицию относительно текущего элемента
insertBefore() Вставляет новый дочерний узел перед указанным, существующим, дочерним узлом
isContentEditable Возвращает значение true, если содержимое элемента является редактируемым, в противном случае — false
isDefaultNamespace() Возвращает значение true, если указанное NamespaceURI является значением по умолчанию, в противном случае — false
isEqualNode() Проверяет, равны ли два элемента
isSameNode() Проверяет, является ли два элемента один и тот же узел
isSupported() Возвращает значение true, если указанный элемент поддерживается в элементе
lang
Задает или возвращает значение атрибута lang элемента
lastChild Возвращает последний дочерний узел элемента
lastElementChild Возвращает последний дочерний элемент элемента
namespaceURI Возвращает URI пространства имен элемента
nextSibling Возвращает следующий узел на том же уровне дерева узлов
nextElementSibling Возвращает следующий элемент на том же уровне дерева узлов
nodeName Возвращает имя узла
nodeType Возвращает тип узла узла
nodeValue Задает или возвращает значение узла
normalize() Соединяет соседние текстовые узлы и удаляет пустые текстовые узлы в элементе
offsetHeight Возвращает высоту элемента, включая заполнение, границу и полосу прокрутки
offsetWidth Возвращает ширину элемента, включая заполнение, границу и полосу прокрутки
offsetLeft Возвращает горизонтальное положение смещения элемента
offsetParent Возвращает контейнер смещения элемента
offsetTop Возвращает вертикальное положение смещения элемента
ownerDocument Возвращает корневой элемент (объект Document) для элемента
parentNode Возвращает родительский узел элемента
parentElement Возвращает родительский узел элемента
previousSibling Возвращает предыдущий узел на том же уровне дерева узлов
previousElementSibling Возвращает предыдущий элемент на том же уровне дерева узлов
querySelector() Возвращает первый дочерний элемент, соответствующий указанному селектору CSS элемента
querySelectorAll() Возвращает все дочерние элементы, соответствующие указанному селектору CSS элемента
removeAttribute() Удаляет указанный атрибут из элемента
removeAttributeNode() Удаляет указанный узел атрибута и возвращает удаленный узел
removeChild() Удаляет дочерний узел из элемента
removeEventListener() Удаляет обработчик событий, который был присоединен с помощью метода addEventListener ()
replaceChild() Заменяет дочерний узел в элементе
scrollHeight Возвращает всю высоту элемента, включая заполнение
scrollIntoView() Прокручивает указанный элемент в видимой области окна обозревателя
scrollLeft Задает или возвращает количество пикселей, в течение которых содержимое элемента прокручивается горизонтально
scrollTop Задает или возвращает количество пикселей, в течение которых содержимое элемента прокручивается вертикально
scrollWidth Возвращает всю ширину элемента, включая заполнение
setAttribute() Задает или изменяет указанный атрибут, к заданному значению
setAttributeNode() Задает или изменяет указанный узел атрибута
style Задает или возвращает значение атрибута Style элемента
tabIndex Задает или возвращает значение атрибута TabIndex элемента
tagName Возвращает имя тега элемента
textContent Задает или возвращает текстовое содержимое узла и его потомков
title Задает или возвращает значение атрибута Title элемента
toString() Преобразует элемент в строку

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:

Различия методов 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 возвращает отличные лаконичные локаторы.

Селекторы и локаторы можно искать и проверять через DevTools

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

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

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-селектор «предыдущий брат»

Объяснение CSS-селектора

Каскадные таблицы стилей: Селектор CSS является частью набора правил CSS , который фактически выбирает контент, который вы хотите стилизовать под .

Синтаксис CSS: Набор правил CSS состоит из селектора и блока объявления :

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

    будут выровнены по центру, с красным цветом текста

код css

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

«предыдущий брат» в селекторе CSS
  • Каскадные таблицы стилей: Каскад похож на водопад, обратного движения нет.Так что, естественно, нет предыдущего селектора в CSS.
  • Однако с помощью flexbox можно смоделировать предыдущий родственный селектор.
  • Свойство гибкого порядка может перемещать элементов по экрану.
  • Элемент A становится красным при наведении курсора на элемент B.

код HTML

  
  • А
  • Б

ШАГОВ:

Шаг 1: Создайте гибкий контейнер ul .

css код

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

Шаг 2: Переверните порядок братьев и сестер в разметке.

код HTML

  
  • Б
  • А

Шаг 3: Используйте родственный селектор для нацеливания на Элемент A (подойдет ~ или + ).

код css

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

Шаг 4: Используйте свойство flex order , чтобы восстановить порядок братьев и сестер на визуальном дисплее.

код css

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

Два устаревших мнения о CSS
  • Flexbox разрушает давние представления о CSS.
  • Предыдущий родственный селектор невозможно в CSS
  • Если вы знаете точную позицию, an: nth-child () -based исключение всех следующих братьев и сестер будет работать.

код CSS

  ul li: not (: nth-child (n + 3))  
  • Вы также можете выбрать nth-child справа налево :

код CSS

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

Предыдущий брат, отсутствующий селектор CSS
  • Способ стилизации всех предыдущих братьев и сестер (противоположность ~) , который может работать в зависимости от того, что вам нужно.
  • Допустим, у вас есть список ссылок, и при наведении на одну из них все предыдущие должны стать красными. Сделать это можно так:

css code

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

  

Идея синтаксиса:
  • Поскольку родительский элемент> дочерний элемент используется для выбора дочерних элементов с указанным родительским элементом, а предшествующий элемент (ы) ~ элемент используется для выбора элементов, которым предшествует указанный элемент.
  • Использование element <предыдущий элемент было бы неправильным форматом, поскольку из-за использования > его можно спутать со ссылкой на родительский элемент.
  • Форматом будет элемент - предыдущий элемент, поскольку он, похоже, не используется и связан с использованием символа + для «следующего».
  • CSS 2.1 имеет несколько действительно удобных селекторов, один из которых является соседним (следующим) селектором-братом, который имеет форму:

код CSS

  el1 + el2
{
цвет: # f0f;
}  
  • Вышеупомянутое применило бы вкусный розовый (ish) цвет текста к el2, где он непосредственно следует за el1 в порядке элементов HTML.
  • Явное упущение (насколько я могу судить) в доступных в настоящее время селекторах CSS - это прямо противоположный селектор, предыдущий брат, который, возможно, может иметь синтаксис:

код CSS

  el1 - el2
{
цвет: # f0f;
}  
  • Очевидный способ стилизовать el2 там, где он встречается непосредственно перед el1, с тем же восхитительным розовым цветом текста.

css code

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

Источник HTML:

код HTML

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

код CSS

  el1 - ~ el2
{
цвет: # f0f;
}  
Специфика

- CSS: каскадные таблицы стилей

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

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

Типы селекторов

Следующий список типов селекторов увеличивается в зависимости от специфики:

  1. Селекторы типа (например, h2 ) и псевдоэлементы (например, :: before ).
  2. Селекторы классов (например, .example ), селекторы атрибутов (например, [type = "radio"] ) и псевдоклассы (например, : hover ).
  3. Селекторы идентификаторов
  4. (например, #example ).

Универсальный селектор ( * ), комбинаторы ( + , > , ~ , ' ', || ) и псевдокласс отрицания (: not () ) не действуют по специфике.(Селекторы объявили внутри : не () , однако.)

Для получения дополнительной информации посетите: «Специфика» в «Каскад и наследование», вы также можете посетить: https://specifishity.com

встроенных стилей, добавленных к элементу (например, style = "font-weight: bold;" ), всегда перезаписывают любые стили во внешних таблицах стилей и, таким образом, могут считаться имеющими наивысшую специфичность.

Исключение! Important

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

Некоторые практические правила:

  • Всегда ищите способ использования специфичности , прежде чем даже рассматривать ! Important
  • Только используют ! Important в CSS для конкретной страницы, который переопределяет сторонний CSS (из внешних библиотек, таких как Bootstrap или normalize.css).
  • Никогда. Используйте ! Important при написании плагина / гибридного приложения.
  • Никогда использовать ! Important в CSS для всего сайта.

Вместо ! Important рассмотрите:

  1. Более эффективное использование каскада CSS
  2. Используйте более конкретные правила. Если указать один или несколько элементов перед выбранным элементом, правило становится более конкретным и получает более высокий приоритет:

      
    Текст
      div # test span {цвет: зеленый; }
    div span {цвет: синий; }
    span {цвет: красный; }  

    Независимо от порядка текст будет зеленым, потому что это правило является наиболее конкретным.(Кроме того, правило для синего заменяет правило для красного, независимо от порядка правил)

  3. Как бессмысленный частный случай для (2), продублируйте простые селекторы для повышения специфичности, когда вам больше нечего указывать.
      # myId # myId span {цвет: желтый; }
    .myClass.myClass span {цвет: оранжевый; }  
Как! Important можно использовать:
A) Переопределение встроенных стилей

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

В этом случае вы можете установить определенные стили в глобальном файле CSS как! Important, тем самым переопределив встроенные стили, установленные непосредственно для элементов.

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

Многие фреймворки и библиотеки JavaScript добавляют встроенные стили.Использование ! Important с очень целевым селектором - один из способов переопределить эти встроенные стили.

B) Преодоление высокой специфичности
  #someElement p {
  цвет синий;
}

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

Как сделать так, чтобы классных абзацев всегда становились красными, даже если они находятся внутри #someElement ? Без ! Important первое правило будет более конкретным и победит второе правило.

Как переопределить
! Important

A) Добавьте еще одно правило CSS с ! Important и либо придайте селектору более высокую специфичность (добавив тег, идентификатор или класс к селектору), либо добавьте правило CSS с тем же селектором позже, чем существующий один.Это работает, потому что в зависимости от специфики побеждает последнее определенное правило.

Некоторые примеры с более высокой специфичностью:

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

B) Или добавьте такой же селектор после существующего:

  td {height: 50px! Important; }  

C) Или, лучше, переписать исходное правило, чтобы вообще не использовать ! Important .

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

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

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

Для получения дополнительной информации посетите:

Исключения: is () и: not ()

Псевдокласс match-any : is () Это экспериментальный API, который не следует использовать в производственном коде.и псевдокласс отрицания : not () - это , а не , рассматриваемые как псевдокласс при вычислении специфичности. Но селекторы, помещенные в псевдокласс, считаются обычными селекторами при определении количества типов селекторов.

Этот фрагмент CSS ...

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

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

... при использовании со следующим HTML ...

  

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

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

... появляется на экране так:

Исключение: where () Это экспериментальный API, который не следует использовать в производственном коде.

Псевдокласс настройки специфичности : where () Это экспериментальный API, который не следует использовать в производственном коде. его специфичность всегда заменяется нулем.

Этот фрагмент CSS...

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

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

... при использовании со следующим HTML ...

  

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

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

... появляется на экране так:

Специфика на основе формы

Специфика основана на форме селектора.В следующем случае селектор * [id = "foo"] считается селектором атрибутов с целью определения специфичности селектора, даже если он выбирает идентификатор.

Следующие стили CSS ...

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

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

... при использовании с этой разметкой ...

  

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

... в итоге получится так:

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

Незнание близости дерева

Близость элемента к другим элементам, на которые имеется ссылка в данном селекторе, не влияет на специфичность. Следующее объявление стиля ...

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

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

... со следующим HTML ...

  
  
    

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

... будет отображаться как

Это связано с тем, что два объявления имеют одинаковое количество типов селектора, но селектор html h2 объявляется последним.

Элементы с прямым нацеливанием и унаследованные стили

Стили для элемента с прямым нацеливанием всегда имеют приоритет над унаследованными стилями, независимо от специфичности унаследованного правила. Этот CSS ...

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

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

... со следующим HTML ...

  
  
    

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

... также будет отображаться как:

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

  • Калькулятор специфичности: интерактивный веб-сайт для тестирования и понимания ваших собственных правил CSS - https://specificity.keegan.st/
  • Специфика селекторов CSS3
  • - http://www.w3.org/TR/selectors/#specificity
  • Ключевые концепции
  • CSS: Синтаксис CSS, по правилу Комментарии, специфичность и наследование, коробка, режимы компоновки и модели визуального форматирования, и падение маржи, или начальный, вычислено, решено, указано, использовал, и фактические значения.Определения синтаксиса значений, сокращенные свойства и заменил элементы.

Расширенные селекторы CSS для распространенных сценариев

CSS - это странно. Он не похож ни на один другой язык, который используют веб-разработчики, но он важен для визуального представления веб-сайта - той части, с которой взаимодействуют пользователи. В своей основной форме CSS прост. Например, background-color: red означает, что фон будет красного цвета. Тем не менее, как скажет вам любой, кто работал с большой базой кода CSS, она может быстро стать очень сложной и запутанной.

CSS Grid, BEM, Dart Sass, всегда есть что узнать о CSS. Это потрясающе! Вместо того чтобы смотреть на то, что нового, давайте сосредоточимся на фундаментальном строительном блоке CSS - селекторе. Благодаря лучшему пониманию селектора и того, как его использовать более продвинутыми способами, вы можете решать распространенные сценарии с меньшим количеством кода и более чистым CSS.

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

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

  • Простые селекторы для выбора элементов HTML, например div , #id или .class
  • Селекторы комбинатора, основанные на кодовых отношениях, таких как «дочерний элемент» p> div или «смежный родственник» div + div
  • Селекторы псевдокласса для выбора определенного состояния элемента, такого как : hover , : first-child или : nth-of-type
  • Селекторы псевдоэлементов для выбора определенных частей элемента, такого как :: после , :: выбор или :: первая буква .Обратите внимание, что они всегда используют нотацию с двойным двоеточием :: по сравнению с селекторами псевдоклассов, которые используют одно двоеточие
  • Селекторы атрибутов для выбора элементов с определенными атрибутами, такими как ( [class | = "class-name"] , [type = "text"] или [target]

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

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

: n-й-последний-ребенок (-n + 2)

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

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

Есть : первый ребенок , : nth-ребенок , : nth-of-type , и этот список можно продолжить. Эти селекторы становятся еще более мощными, если они превращаются в выражения с использованием чисел, счетчика n , нечетного или четного . Вы можете выполнять математические вычисления, чтобы выбрать практически любое количество элементов в группе. Например, n - это способ создания алгебраических выражений.Таким образом, (2n + 4) приравнивается к (2 * n) +4 , который выберет все остальные элементы, начиная с четвертого:

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

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

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

Вы можете прочитать этот селектор как «выберите два последних дочерних элемента .товар ». Глядя на то, как это работает, -n + 2 равняется (-0 + 2) = 2 или предпоследнему элементу, затем (-1 + 2) = 1 или последнему элементу, затем ( -2 + 2) = 0 , который ничего не выбирает, затем (-3 + 2 = -1) , который, опять же, ничего не выбирает, и так далее для общего количества дочерних элементов. Выбраны только два элемента из-за отрицательного знака перед n , который вызывает обратный отсчет. Если вы хотите выбрать последние три элемента, -n + 3 сделает именно это.Это позволяет нам выбирать эти элементы, ничего не добавляя в HTML!

См. Демонстрацию селектора Pen
-: nth-last-child (-n + 2) Эндрю Спенсера (@iam_aspencer)
на CodePen.

: not (: last-child)

Чтобы продолжить последний пример, вы можете объединить : last-child с селектором : not . Это может помочь в сценариях, где последний элемент в группе имеет другой стиль. На веб-сайтах часто требуется список элементов с небольшим промежутком между ними.Распространенной проблемой этих сценариев является необходимость удалить интервал под последним элементом в группе.


Часто с помощью CSS кажется естественным сначала стилизовать наиболее распространенный сценарий, а затем , а затем учитывать любые отдаленные сценарии с более конкретным селектором. Затем стили более конкретного селектора переопределят стили более общего селектора. Что в нашем примере может привести к примерно такому результату:
 .image {
  нижнее поле: 2 бэр;

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

Или вы могли бы добавить в HTML совершенно новый класс, используя структуру БЭМ CSS.Что даст вам это:

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

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

Оба пути приводят к семи строкам кода и переопределяющему свойству. Не страшно, но если вы думаете о своем CSS как о языке программирования и «программируете» логику прямо в селекторе, вы можете уменьшить CSS до следующего:

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

Читая селектор выше, он говорит: «выберите изображение, которое не является последним дочерним элементом.«Три строки кода и никаких замещающих стилей - неплохо!

См. Демонстрацию селектора Pen
-: nth-last-child (-n + 2) Эндрю Спенсера (@iam_aspencer)
на CodePen.

элемент: hover + смежный брат

Давайте посмотрим на другой сценарий - состояния наведения. Иногда вам нужно настроить элемент, отличный от элемента, на который наведен курсор. В JavasScript это довольно просто, поскольку JavaScript упрощает поиск определенного элемента, что также называется обходом DOM.Однако часто при правильной структуре HTML вам нужен только CSS.

С помощью CSS вы можете использовать селекторы комбинаторов, такие как .parent> .child или .element + .general-sibling , для нацеливания на различные элементы. Единственное, чего не может сделать CSS, - это настроить таргетинг на элемент, являющийся родителем элемента, на который наведен курсор. Вот диаграмма того, на что может ориентироваться CSS:

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

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

См. Демонстрацию селектора Pen
-: hover + sibling от Эндрю Спенсера (@iam_aspencer)
на CodePen.

Родственный селектор также можно использовать для полей формы. С селектором label: hover + input , взаимодействие с элементом можно использовать для выделения , который является родственником после .

См. Демонстрацию селектора Pen
-: hover + sibling, автор Эндрю Спенсер (@iam_aspencer)
на CodePen.

Твоя очередь

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

Ваш интерфейс загружает процессор ваших пользователей?

По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера.Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket. Https://logrocket.com/signup/

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

Модернизируйте отладку веб-приложений - начните мониторинг бесплатно.

Селектор смежных братьев и сестер

Селектор соседних братьев и сестер

Web Review
Июль 2000 г.

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

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

Как это работает

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

  h2 + P {margin-top: 0;}
  

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

Давайте рассмотрим это немного подробнее. Изучите древовидное представление на Рисунке 1 на мгновение.


Рисунок 1. Поиск соседних братьев и сестер с помощью дерева документов.

Одним из примеров соседних братьев и сестер являются элементы EM и STRONG внутри абзаца. Фактически, единственное место на рисунке 1, где элементы не имеют соседних братьев и сестер, - это там, где у них вообще нет братьев и сестер, например, элемент A ; и в неупорядоченном списке с тремя LI дочерними элементами. Там первый и третий элементы LI не смежны. Первый и второй являются смежными, как и второй и третий, но первый и третий разделены вторым и, следовательно, не являются смежными.

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

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

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

 

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

Текст между элементами не влияет на работу селектора. Это верно даже для блочных элементов. Рассмотрим:

 

Эй, элемент h4

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

Вот короткий абзац

Мы можем сделать абзац серым по следующему правилу:

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

Помните, что смежный селектор заботится только об элементах и ​​их месте в структуре документа. Вот почему текст фактически игнорируется. (Технически он является частью DIV и поэтому находится «на один уровень выше» в дереве документа, как часть родительского DIV .)

Комбинирование с другими селекторами

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

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

Предположим, мы хотим сузить его еще больше: мы хотим, чтобы эта серость возникла только тогда, когда элементы h4 и P являются дочерними элементами DIV (в отличие от потомков любого уровня).В этом случае мы пишем:

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

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

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

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

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

Если вы все еще не уверены в том, как это работает, попробуйте взять собственный документ средней сложности и попытаться создать селекторы, которые будут точно адресовать данный элемент, используя все различные селекторы CSS2, которые мы здесь использовали.Небольшая практика поможет вам освоиться с этими селекторами. (Чтобы узнать, какие браузеры помогут вам в этой практике, см. Раздел «Поддержка браузеров» в конце статьи.)

Интересное применение

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

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

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

Это также предполагает, что никаких других элементов h2 не будет в статье, или, если они есть, то ни за одним не будет следовать абзац. Если вы уже классифицируете h2 , чтобы отметить его как заголовок статьи, вы можете использовать это в своих интересах:

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

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

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

Первый LI в списке не будет выбран, потому что он не следует сразу за элементом LI, а все остальные делают.

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

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

Та-да! Обычный размер поля между заголовками и всем, что следует за ними, составляет всего лишь восьмую часть em.Вы, конечно, можете варьировать эту сумму по своему усмотрению. Это можно адаптировать любым количеством способов: вы можете подтягивать списки ближе к абзацам, используя P + UL , увеличивать разделение между таблицами, которые непосредственно следуют друг за другом, и любым другим количеством вещей.

Поддержка браузера

Селекторы соседних братьев поддерживаются в Internet Explorer 5.x Macintosh. Они также поддерживаются в предварительном выпуске 1 Netscape 6 для всех бесчисленных платформ, для которых он доступен, и в предварительном выпуске 3 Opera 4 для Windows.В IE5 для Windows и Opera 3 для Windows есть ошибки в обработке селекторов соседних братьев и сестер.

Еще больше впереди

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *