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


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

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

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

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

 h1 + p 



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

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


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

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


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

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



Примечание: псевдо-элемент :first-line принят в CSS 2.1, в CSS 3 используется запись ::, с целью установить различие между псевдо-классами и псевдо-элементами.

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

Обычный протокол разметки – это помещение разделов в как-либо названном элементе в #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%; } 



В будущем это поможет вам добавлять или удалять элементы верхнего уровня в документе. Возвращаясь к нашей начальной схеме разметки, это повлияет на элементы header, article и footer, но никак не коснется #main и всего остального внутри элемента article.

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

Селекторы атрибутов – одни из самых действенных. Они также существовали в 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> 



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

  #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<sub><small>2</small></sub>SO<sub><small>4</small></sub></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 <sup><small>n</small></sup> + Y <sup><small>n</small></sup>
= Z <sup><small>n</small></sup></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-код с примером работы селектора соседнего элемента.

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

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

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

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

CSS: соседние селекторы: работа примера №2
Рисунок 1. Работа примера №5.

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” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8"> </head>  <body>   <input type="checkbox">  <input type="checkbox" checked>  <input type="text" id="message">   <h3 id="widget-title">Сообщения:</h3>  <ul id="messages">  <li id="message-1">Сообщение 1</li>  <li id="message-2">Сообщение 2</li>  <li id="message-3" data-action="delete">Сообщение 3</li>  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>  <li id="message-5" data-action="edit delete">Сообщение 5</li>  <li><a href="#">...</a></li>  </ul>    <a href="http://site.com/list.zip">Ссылка на архив</a>  <a href="http://site.com/list.pdf">..И на PDF</a>    <script>  // тестовая функция для селекторов  // проверяет, чтобы элементов по селектору selector было ровно count  function test(selector, count) {  var elems = document.querySelectorAll(selector);  var ok = (elems.length == count);   if (!ok) alert(selector + ": " + elems.length + " != " + count);  }   // ------------- селекторы --------------   // Выбрать input типа checkbox  test('input[type="checkbox"]', 2);   // Выбрать input типа checkbox, НЕ отмеченный  test('input[type="checkbox"]:not(:checked)', 1);   // Найти все элементы с id=message или message-*  test('[id|="message"]', 6);   // Найти все элементы с id=message-*  test('[id^="message-"]', 5);   // Найти все ссылки с расширением href="...zip"  test('a[href$=".zip"]', 1);   // Найти все элементы с data-action, содержащим delete в списке (через пробел)  test('[data-action~="delete"]', 2);   // Найти все элементы, у которых ЕСТЬ атрибут data-action,  // но он НЕ содержащит delete в списке (через пробел)  test('[data-action]:not([data-action~="delete"])', 1);   // Выбрать все чётные элементы списка #messages  test('#messages li:nth-child(2n)', 3);   // Выбрать один элемент сразу за заголовком h3#widget-title  // на том же уровне вложенности  test('h3#widget-title + *', 1);   // Выбрать все ссылки, следующие за заголовком h3#widget-title  // на том же уровне вложенности  test('h3#widget-title ~ a', 2);   // Выбрать ссылку внутри последнего элемента списка #messages  test('#messages li:last-child a', 1);  </script> </body>  </html>

learn.javascript.ru

Описание селектора:

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

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

Подробнее про селектор сестринского элемента

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

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

А такой span не будет жирным — между ним и h1 имеется дополнительный элемент:

Далее пример немного сложнее. Как думаешь, будет ли следующий span выделен жирным?

Правильный ответ — да, будет. Запомни, согласно спецификации W3C простой текст (не взятый ни в какой тег) игнорируется сестринским селектором. Также проигнорировались бы комментарии (если бы мы их расположили между h1 и span).

Посмотри еще несколько примеров:

Эти span’ы не будут жирными, так как у них и у элемента h1 разные родители.

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

Псевдоинверсия :first-child

Не забудь, что селектор выбирает именно тот элемент, который в записи следует после комбинатора. В нашем примере выбирался именно «span после h1», но не наоборот. На этом принципе построен интересный прием выбора первого из группы однотипных элементов:

Получается как бы :first-child наоборот. Стили применяются ко всем элементам кроме первого. Конечно, это не совсем :first-child. Тут подразумевается «кроме первого из группы однотипных».

Никто не запретит написать такой код:

Затесавшийся между h1 и группой абзацев span не позволит применить индивидуальные стили для первого абзаца с помощью :first-child, ведь теперь первый потомок именно span! А сестринский элемент эту задачу решит просто и элегантно (надеюсь, понятно, что «применить стили к первому абзацу» и «применить стили ко всем абзацам кроме первого» — это фактически равнозначные действия, так как и то и другое позволит выделить первый абзац и задать ему индивидуальное оформление).

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

Ограничение

IE6 не понимает сестринский селектор. Вразумить его можно с помощью experssion. Подробнее читай статью Сестринский селектор для IE6.

Область применения

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

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

Следующая статья — Селектор обобщенных родственных элементов.

xiper.net


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.