Css следующий элемент

Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.

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

Соседний родственный комбинатор

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

 h1 + p 

  p + p {  text-indent: 1em;  } 

Это гораздо удобней, чем выделять первый параграф с помощью class=«first». Три строки, никаких классов и полная поддержка браузеров. Если вы располагаете тэги img, относящиеся к наполнению сайта, внутри тэгов p (как, собственно, и следует делать), можно просто отодвинуть их левые поля обратно с помощью негативного значения -1em:

   p + p img {  margin-left: -1em;  } 

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

  h1 + p::first-line {  font-variant: small-caps;  } 

Наследственный комбинатор

Обычный протокол разметки – это помещение разделов в как-либо названном элементе в #page или #wrap:

  <div id="page">  <header></header>  <article>  <section id="main"></section>  <aside></aside>  </article>  <footer></footer> </div> 

Вне зависимости от того, используете ли вы синтакис HTML 5 или XHTML 1.1, этот основной формат должен выглядеть для вас знакомо. Если ваш документ имеет фиксированную ширину в 960px, выровнен по центру и каждый элемент расположен горизонтально, ваш CSS скорее всего напоминает:

  #page {  width: 960px;  margin: 0 auto;  } header, article, footer { width: 100%; } 

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

  #page header, #page article, #page footer { width: 100%; } 

Есть способ получше. Мы все знакомы с универсальным селектором *. Если комбинировать его употребление с наследственным селектором, можно выбрать все элементы, являющиеся прямыми потомками #page, без какого-либо влияния на «внучатые» элементы:

  #page > * { width: 100%; } 

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

Селекторы атрибутов – одни из самых действенных. Они также существовали в CSS 2.1 и обычно использовались в форме input[type=«text»] или [href="#top"]. Но CSS3 предлагает более глубокий уровень контроля в форме строк и подстрок.

Примечание: до сих пор все, что мы обсуждали, относилось к стандарту CSS 2.1, но теперь мы вступаем на территорию CSS3.

Существует четыре основных селектора атрибутов строки, где ‘v’ = значение, ‘a’ = атрибут.
v – одно из списка значений, разделенных пробелом: element[a~=«v»]
a начинается с v: element[a^=«v»]
a заканчивается на v: element[a$=«v»]
a содержит значение: element[a*=«v»]

Потенциал селекторов атрибута строки фактически бесконечен, но отличным примером являются иконки. Скажем, у вас есть неупорядоченный список ссылок на профайлы в соцсетях:

  <ul id="social">  <li><a href="http://facebook.com/designfestival">Like on Facebook</a></li>  <li><a href="http://twitter.com/designfestival">Follow on Twitter</a></li>  <li><a href="http://feeds.feedburner.com/designfestival">RSS</a></li> </ul> 

  #social li a::before {  content: '';  background: left 50% no-repeat;  width: 16px;  height: 16px;  } #social li a[href*="facebook"]::before {  background-image: url(images/icon-facebook.png);  } #social li a[href*="twitter"]::before {  background-image: url(images/icon-twitter.png);  } #social li a[href*="feedburner"]::before {  background-image: url(images/icon-feedburner.png);  } 

Аналогичным образом, можно выбрать все ссылки в PDF документах селектором атрибута Suffix:

  a[href$=".pdf"]::before {  background-image: url(images/icon-pdf.png);  } 

Браузеры, не поддерживающие атрибуты подстрок в CSS3, не покажут эти иконки, но это не так важно – они всего лишь красивое дополнение, без особой функциональности.

Структурные псевдо-классы

Наконец, мне хочется обрисовать выгодность использования псевдо-классов (не путать с псевдо-элементами и псевдо-классами link и state). Мы можем использовать их для выделения элементов по их позиции в DOM. Хорошим примером использования структурного псевдо-класса является выделение первого (или последнего) элемента в дереве элементов, или выбор между четными и нечетными элементами.

  <ul>  <li>List Item 1</li>  <li>List Item 2</li>  <li>List Item 3</li>  <li>List Item 4</li>  <li>List Item 5</li>  <li>List Item 6</li> </ul> ul li { border-top: 1px solid #DDD; } ul li:last-child { border-bottom: 1px solid #DDD; } ul li:nth-child(even) { background: #EEE; } 

Примечание: единственный доступный в CSS 2.1 псевдо-элемент — :first-child. Все остальные псевдо-элементы, включая :last-child, относятся к стандарту CSS3.

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

Возможно, вы уже используете некоторые из вышеуказанных комбинаторов и селекторов – может, правильно, а может и нет, — но лишнее напоминание, в каких случаях они удобнее, чем class или ID, не повредит. Даже лучшие из нас часто ошибаются в подобных вещах.

habr.com

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

1. Какие теги в данном коде являются соседними?

<p><b>Формула серной кислоты:</b><i>H_{<small>2</small>}SO_{<small>4</small>}</i></p>

1. <P> и <I>
2. <B> и <I>
3. <I> и <SUB>
4. <SUB> и <SMALL>
5. <I> и <SMALL>

2. Имеется следующий код HTML:

<p><b>Великая теорема Ферма</b></p>
<p><i>X ^{<small>n</small>} + Y ^{<small>n</small>}
= Z ^{<small>n</small>}</i></p>
<p>где n — целое число > 2</p>

Какой текст выделится красным цветом с помощью стиля SUP + SUP { color: red; } ?

1. «X»
2. «Y»
3. «Z»
4. Вторая «n»
5. Вторая и третья «n».

Ответы

1. <B> и <I>

2. Вторая и третья «n».

htmlbook.ru

Более реальный пример

Давайте рассмотрим работу соседнего селектора на более реальном примере. В больших статьях, содержащих несколько разделов обозначенных тегами <h2>, желательно увеличить верхний отступ (свойство margin-top). Отступ в 30px будет придавать тексту читабельности. Но вот в случае, если тег <h2> идёт сразу после <h1>, а это может быть в начале статьи, вержний отступ над тегом <h2> будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.

Вот html-код с примером работы селектора соседнего элемента.

 

 <!DOCTYPE html> <html> <head> 	<title>Соседний селектор в CSS</title> <style> 	h1 { margin-bottom: 0px; } 	h2 { margin-top: 50px; } 	h1+h2 { margin-top: 0px; } </style> </head> <body>  <h1>Привет!</h1> <h2>Заголовок h2</h2> <p>Текст абзаца в про невероятные приключения.</p>  <h2>Заголовок h2</h2> <p>Текст абзаца в про невероятные приключения.</p>  <h2>Заголовок h2</h2> <p>Текст абзаца в про невероятные приключения.</p>  <h2>Заголовок h2</h2> <p>Текст абзаца в про невероятные приключения.</p>  </body> </html>

Также используя инструмент соседнего селектора удобно регулировать отступ между заголовком и первым абзацем раздела, в нашем примере это теги <h2> и <p>.

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

<!DOCTYPE html> <html> <head> 	<title>Соседний селектор .  

 вок h2</h2> <p>Текст абзаца в про невероятные приключения.</p>  </body> </html>

Теперь пример того, как при помощи соседнего селектора выделить все элементы списка, кроме первого.

<!DOCTYPE html> <html> <head> 	<title>Соседний селектор в CSS</title> <style> 	li+li { 	color: red; 	} </style> </head> <body>  <ul> 	<li>Пункт списка №1.</li> 	<li>Пункт списка №2.</li> 	<li>Пункт списка №3.</li> 	<li>Пункт списка №4.</li> </ul>  </body> </html>

Вот что получится в результате работы этого примера:

komotoz.ru

Введение

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

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class. Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

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

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS, значение которого заканчивается определенным символом (суффиксом) выглядит следующим образом:

Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Пример:

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

Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:

Этот селектор можно использовать для любых элементов (div, span, img и т.д.), а также любых их атрибутов (id, name, value и class HTML CSS).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ($=):

Селектор будет выглядеть следующим образом:

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.

(* =) — атрибут содержит некоторое значение

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

Выбор этого элемента будет выглядеть следующим образом:

Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:

Можно обратиться к элементу div, используя указанный выше атрибут = или через атрибут класса:

Краткий обзор селекторов атрибутов:

• = значение атрибута эквивалентно определённым символам;
• $= значение атрибута оканчивается определенными символами;
• ^= значение атрибута начинается с определенных символов;
• *= значение атрибута содержит определенные символы.

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

Перед тем, как задать параметры class в CSS, нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:

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

Псевдокласс :not(x)

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:

Можно пойти дальше и выбирать любые атрибуты.

Например:

Псевдоэлемент ::first-letter

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):

Этот подход освобождает от необходимости использования JavaScript.

Псевдокласс :first-of-type

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

Псевдокласс :last-of-type

:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:

Заключение

Вы познакомились с «продвинутыми» CSS class selector, о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.

Перевод статьи “Advanced CSS Selectors you never knew about” был подготовлен дружной командой проекта Сайтостроение от А до Я.