Css соседний элемент

Селектор соседнего элемента выбирает элемент, расположенный в коде документа непосредственно за другим заданным элементом. Давайте для примера возьмём кусок html-кода.

<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>

Тут три тега: <p>, <b> и <i>. Теги <b> и <i> вложены в контейнер <p>, они являются дочерними по отношению к нему. Но по отношению друг к другу они являются соседними.

Синтаксис соседнего селектора: селектор предыдущего элемента, знак «+» и за ним селектор выбираемого элемента. Давайте работу соседнего селектора:

<!DOCTYPE html> <html> <head> 	<title>Соседний селектор в CSS.</title> <style> 	b+i { color: red; } </style> </head> <body> 	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p> 	<p>Тут <b>жирный</b> и <u>подчёркнутый</u> элементы, ещё <i>наклонный</i>.</p> </body> </html>

В примере видно, что селектор соседнего элемента сработал в первом абзеце. Тут теги <b> и <i> идут друг за другом. А во втором абзаце между ними использован тег <u>, теперь тут две другие соседние пары тегов: <b> + <u> и <u> + <i>.

Ошибкой в данном случае будет считать тег <b> соседним по отношению к тегу <p>. Тут тег <b> является дочерним по отношению к тегу <p>, а он, в свою очередь, является родителем <b>.

Пример ниже не сработает:

<!DOCTYPE html> <html> <head> 	<title>Соседний селектор в CSS.</title> <style> 	p+b { color: red; } // В коде нет таких соседей. </style> </head> <body> 	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p> 	<p>Тут <b>жирный</b> и <u>подчёркнутый</u> элементы, ещё <i>наклонный</i>.</p> </body> </html>

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

Давайте рассмотрим работу соседнего селектора на более реальном примере. В больших статьях, содержащих несколько разделов обозначенных тегами <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>Соседний селектор в CSS</title> <style> 	h2 { margin-top: 50px; } 	h1+h2 { margin-top: -20px; } 	h2+p { margin-top: -1em; } </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>

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

<!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>

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

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

komotoz.ru

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

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

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

7.0+

Описание

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

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

Рассмотрим, как это работает на небольшом примере:

 div + p { color: blue; }

Таким образом мы указали, что стиль будет применён ко всем элементам <p>, которые расположены в коде непосредственно после элементов <div>.

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

  • div+p
  • div+ p
  • div +p
  • div + p

Пример:

  <!DOCTYPE html>  <html>   <head>   <style type="text/css">   div + p { background-color: yellow; }   </style>   </head>     <body>     <div>   <p>Этот абзац расположен внутри элемента &lt;div&gt;.</p>   </div>  	   <p>Этот абзац является соседним сестринским элементом по отношению  	к элементу &lt;div&gt;.</p>  	  	<p>Ещё один абзац, однако он не является соседним по отношению к  	элементу &lt;div&gt;.</p>     </body>  </html>  

Результат данного примера:

puzzleweb.ru

Соседние селекторы

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

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

  h1+p {  font-style: italic;  }  

Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN {} (стиль применяется к selectorN).

Примеры написания:

  /* Отступ от абзаца до картинки 30px */  p+img {  padding-top: 30px;  }    /* Зеленый цвет для абзаца, который следует после h3 в связке с h2 */  h2+h3+p {  color: green;  }  

Родственные селекторы

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

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

  h1 ~ p {   font-style: italic;  }  

…и немного HTML для примера:

  <div>  <p>Текст</p>  <h1>Заголовок 1</h1>  <p>Текст</p>  <p>Текст</p>  <h2>Заголовок 2</h2>  <p>Текст</p>   </div>    <div>  <p>Текст</p>   </div>  

Взгляните на HTML-код: стиль применится ко всем тегам <p>, которые следуют после тега <h1> и находятся до закрывающего тега родителя <div>. В нашем варианте насчитывается 3 элемента <p>, к которым применится стиль. Обратите внимание, что тег <h2> этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу <p>, который находится над <h1>, а также к тегу <p>, имеющему другого родителя <div>.

Выводы

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

idg.net.ua

Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)

Комбинаторы — это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.

Первый комбинатор символ плюс (+) или соседний селектор. Плюс устанавливается между двумя селекторами:

<селектор 1> + <селектор 2> { <стиль> }

Стиль в этом случае применяется к селектору 2, но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:

 strong + i {
color: red; /* Красный цвет текста */
}

<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>красный текст</i> к нему применилось правило соседних селекторов.</p>
<p>Это обычный текст. <strong>Это жирный текст</strong>, <span>обычный текст</span>, <i>и это обычный текст</i>.</p>

Результат:

соседние селекторы

Стиль описанный в примере будет применен только к первому тексту заключенному в тег <i>, т.к. он следует сразу же после тега <strong>.

Комбинатор тильда (~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:

<селектор 1> ~ <селектор 2> { <стиль> }

Стиль будет применен к селектору 2, который должен следовать за селектором 1. Рассмотри пример:

 strong ~ i {
color: red; /* Красный цвет текста */
}

<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>красный текст</i> к нему применилось правило соседних селекторов.</p>
<p>Это обычный текст. <strong>Это жирный текст</strong>, <span>обычный текст</span>, <i>а это красный текст</i>.</p>

Результат:

селектор тильда

Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег <i>, несмотря на то, что во втором случае между тегом <strong> и <i> стоит тег <span>.

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

<селектор 1> > <селектор 2> { <стиль> }

Стиль будет привязан к селектору 2, который непосредственно вложен в селектор 1.

Пример:

div > strong {
font-style: italic /* Курсив */
}

<div>Это обычный текст. <strong>Это жирный курсивный текст </strong>.
<p>Это обычный текст. <strong>А это обычный жирный текст</strong>.</p>
</div>

И результат:

css дочерний селектор

Как видно на рисунке, правило стиля подействовало только на первый тег <strong>, который непосредственно вложен в тег <div>. А непосредственным родителем второго тега <strong> является тег <p>, поэтому правило на него не действует.

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

<селектор 1> <селектор 2> { <стиль> }

Стиль будет применен к селектору 2, если он так или иначе вложен в селектор 1.

Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:

div strong {
font-style: italic /* Курсив */
}

<div>Это обычный текст. <strong>Это жирный курсивный текст </strong>.
<p>Это обычный текст. <strong>А это тоже курсивный жирный текст</strong>.</p>
</div>
<p>Обычный текст и <strong>просто жирный текст</strong></p>

Результат:

css контекстный селектор

Как видим, на этот раз правило подействовало на оба тега <strong>, даже на тот, который вложен и в контейнер <div> и в абзац <p>. На тег <strong>, который просто вложен в абзац <p> правило css никак не действует.

Селекторы по атрибутам тега

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

1. Простой селектор атрибута

Имеет вид:

<селектор>[<имя атрибута тега>] { <стиль> }

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

strong[title]{
color:red;
}

<p><strong>Автомобиль</strong> это механическое моторное безрельсовое <strong title=»транспортное средство»>дорожное транспортное средство</strong> минимум с 4 колёсами.</p>

Результат:

селектор атрибутов

На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong, к которому добавлен атрибут title.

2. Селектор атрибута со значением

Синтаксис этого селектора следующий:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением. Пример:

a[target=»_blank»]{
color:red;
font-size:150%;
}

<p><a href=»http://webcodius.ru» target=»_self»>Обычная ссылка</a> | <a href=»http://webcodius.ru» target=»_blank»>Ссылка в новом окне</a></p>

Результат:

Селектор атрибута + значение

Как видим, оба элемента типа гиперссылка имеют атрибут target, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу <a> у которого атрибут target имеет значение «_blank».

3. Одно из нескольких значений атрибута

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

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

[class~=»tel»]{
color:red;
font-size:150%;
}

<p>Наш телефон: <span class=»tel block»>777-77-77</span></p>
<p>Наш адрес: <span class=»adress block»>Москва ул. Советская 5</span></p>

Получиться следующий результат:

селектор из нескольких значений атрибута

Правило применяется к элементу, у которого среди значений атрибута class имеется значение tel.

4. Дефис в значении атрибута

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

[атрибут|=»значение»] { стиль }
Селектор[атрибут|=»значение»] { стиль }

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

[class|=»menu»]{
color:red;
font-size:150%;
}

<ul>
<li class=»menu-item»>Пункт 1</li>
<li class=»item-menu»>Пункт 2</li>
<li class=»menuitem»>Пункт 3</li>
<li class=»menu-item»>Пункт 4</li>
</ul>

Результат:

селектор атрибутов с дефисом

В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „.

5. Значение атрибута начинается с определенного текста

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

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

a[href^=»http://»]{
color:green;
font-weight:bold;
}

<p><a href=“http://webcodius.ru»>Внешняя ссылка</a> | <a href=»/spravochnik-css/chto-takoe-css-i-kak-podklyuchit-kaskadnye-tablicy-stilej-k-html-dokumentu.html» target=»_blank»>Ссылка на внутреннюю страницу сайта</a></p>

Результат:

значение атрибута начинается с текста

В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href начинается со значения http://.

6. Значение атрибута заканчивается определенным текстом

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

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

IMG[SRC$=gif] {
border: 5px solid red;
}

<p>Картинка формата gif</p>
<img src=»1.gif»>
<p>Картинка формата png</p>
<img src=»2.jpg»>

Результат:

селектор атрибутов

В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.

7. Значение атрибута содержит указанную строку

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

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

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

IMG[SRC*=gallery/] {
border: 5px solid red;
}

<p>Картинка из папки gallery</p>
<img src=»gallery/1.jpg»>
<p>Картинка из другой папки</p>
<img src=»2.jpg»>

Результат:

селектор атрибутов

В примере стиль применяется к картинкам, которые загружены из папки «gallery».

На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой:

Селектор[атрибут1=»значение1″][атрибут2=»значение2″] { стиль }

Кроме того напомню о специальных селекторах CSS :

  • с помощью символов «+» и «~» формируются соседние селекторы;
  • символ «>» привязывает css стили к дочерним тегам;
  • символ <пробел> формирует контекстные селекторы.

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

На этом все, до новых встреч.

webcodius.ru

Соседние селекторы

 

Соседним элементом считается тот, что следует непосредственно за указанным. Синтексис:

 

Тег1 + Тег2 {стили}

 

Стилибудут применяться к Тегу2 только тогда, когда он следует после Тега1.

 

Пример:

 

<h1>Аннотация</h1>

<p>Аннотация (от лат. annotatio — замечание) или резюме (от фр. résumé — «сокращённый») — краткая характеристика издания: рукописи, монографии, статьи или книги. Аннотация показывает отличительные особенности и достоинства издаваемого произведения, помогает читателям сориентироваться в их выборе.</p>

<p>Аннотация даёт ответ на вопрос: «О чём говорится в первичном документе?»</p>

<p>Перед текстом аннотации присутствуют выходные данные (автор, название, место и время издания) в номинативной форме.</p>

<p>Аннотация содержит основную тему статьи или книги, кроме этого она может перечислять (называть) основные положения описываемого источника.</p>

<p>Аннотация может не упоминать субъект действия (предполагая, что он известен из контекста), и содержать пассивные конструкции — глагольные и причастные.</p>

 

 

Аннотация (от лат. annotatio — замечание) или резюме (от фр. résumé — «сокращённый») — краткая характеристика издания: рукописи, монографии, статьи или книги. Аннотация показывает отличительные особенности и достоинства издаваемого произведения, помогает читателям сориентироваться в их выборе.

Аннотация даёт ответ на вопрос: «О чём говорится в первичном документе?»

Перед текстом аннотации присутствуют выходные данные (автор, название, место и время издания) в номинативной форме.

Аннотация содержит основную тему статьи или книги, кроме этого она может перечислять (называть) основные положения описываемого источника.

Аннотация может не упоминать субъект действия (предполагая, что он известен из контекста), и содержать пассивные конструкции — глагольные и причастные.

 

Здесь применялись такие стили:

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5
  • Пункт 6
  • Пункт 7
  • Пункт 8
  • Пункт 9
  • Пункт 10

kate-land.net

Не так давно вышла новая, восьмая версия браузера Internet Explorer, и все веб-мастера вздохнули с облегчением. Ведь наконец-то браузер от Microsoft, пусть и с огромным опозданием, начал более-менее уважительно относиться к спецификациям HTML и CSS и адекватно отображать веб-страницы. В общем-то, все ожидали этого еще от седьмой версии. Однако она, на первый взгляд, не принесла ничего нового, кроме поддержки использования вкладок. Но это только на первый взгляд… Мало кто знает еще об одном весьма значительном нововведении в IE7: именно в этой версии данный браузер впервые начал поддерживать новые виды CSS-селекторов.

Селектор – часть CSS-правила, которая указывает, к каким элементам его применять. Основные их виды известны практически всем веб-мастерам. Но не так уж много людей слышали про такую «экзотику», как соседние и дочерние селекторы, а также селекторы атрибутов. Это объясняется тем, что в их использовании долго не было никакого смысла, ведь один из самых популярных браузеров Internet Explorer не обеспечивал их поддержку. Однако сейчас ситуация поменялась, и открывшиеся новые возможности было бы не очень разумным оставлять в стороне. Именно поэтому я и решил написать этот небольшой обзор.

Соседние селекторы

Указывают, что CSS-правило применяется к элементу только тогда, когда он является соседним по отношению к какому-либо другому элементу. Пример:

<strong>Элементы называются соседними</strong>, когда в коде страницы они <em>расположены рядом друг с другом</em>, и между ними <ins>нет никаких других элементов</ins>

Здесь соседними являются теги <strong> и <em>, а также <em> и <ins>. Теги <strong> и <ins> соседними не являются, поскольку между ними «вклинился» посторонний элемент <em>.

Синтаксис записи соседнего селектора следующий:

I элемент + II элемент {…}

Давайте составим такое правило для нашего примера:

strong + em { color: red; }
strong + ins { color: blue; }

Вот как будет выглядеть результат:

Css соседний элемент

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

Проведем еще один эксперимент — заменим в нашем примере <ins> на <em>:

<strong>Элементы называются соседними</strong>, когда в коде страницы они <em>расположены рядом друг с другом</em>, и между ними <em>нет никаких других элементов</em>

Как нетрудно догадаться, стиль второго из тегов <em> не изменится:

Css соседний элемент

Это происходит потому, что он уже не будет являться соседним для <strong>.

Дочерние селекторы

Указывают, что CSS-правило применяется к элементу только тогда, когда он является дочерним по отношению к какому-либо другому элементу. Пример:

<p>Элемент называется дочерним по отношению к тому элементу, в который он вложен, если он <strong>является <em>непосредственным</em> потомком</strong> этого элемента</p>

Здесь дочерними являются тег <strong> по отношению к тегу <p>, а также <em> по отношению к <strong>. Тег <em> по отношению к тегу <p> дочерним не является, поскольку тот не является его непосредственным родителем.

Синтаксис записи следующий:

I элемент > II элемент { … }

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

p > strong { color: red; } /* Дочерний селектор */
p > em {color: blue; } /* Дочерний селектор */

Мы получим следующий результат:

Css соседний элемент

В нашем случае тег <em> не является дочерним для <p>, поскольку находится на втором уровне вложенности в него. Естественно, что стиль, который должен сделать текст синим цветом, для него не «сработал».

Теперь заменим дочерний селектор на контекстный:

p > strong { color: red; } /* Дочерний селектор */
p em {color: blue; } /* Контекстный селектор */

Результат предсказуем:

Css соседний элемент

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

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

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

<p align=”center”>CSS – очень важная технология, без использования которой невозможно создать хоть сколько-нибудь приличный сайт</p>
<p>Основными понятиями CSS являются стилевые правила, селекторы, свойства и их значения.</p>

Здесь только первый абзац имеет определенный самостоятельно параметр (или атрибут, что одно и то же) align. Следовательно, CSS-правило для селектора атрибута align будет применяться именно к первому абзацу, и только к нему.

Синтаксис записи селектора атрибута:

[атрибут] { … }

Составим правило для нашего примера (для наглядности укажем в дополнение к атрибуту еще и сам тег, для которого его следует рассматривать):

p[align] { color: green; font-weight: bold; }

Нетрудно догадаться, что получится в итоге:

Css соседний элемент

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

[атрибут=”значение”] { … }

Применяется только к тем элементам, которые имеют указанное значение данного атрибута.

[атрибут^=”значение”] { … }

Почти то же самое, только в этом случае атрибут должен лишь начинаться с указанного значения, а не обязательно содержать его целиком.

[атрибут$=”значение”] { … }

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

[атрибут*=”значение”] { … }

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

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

=====================================================================
Автор статьи: Алексей Антонов, создатель и администратор блога о веб-технологиях www.lounwolf.ru
=====================================================================

ruseller.com

Синтаксис 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

You May Also Like

About the Author: admind

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

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

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