Великая теорема Ферма

X ⁿ + Y ⁿ
= Z ⁿ

где n - целое число > 2

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

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

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

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

Универсальный селектор

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

Здесь оператор «*» и означает, что перед нами универсальный селектор. Он используется тогда, когда необходимо установить единый стиль для всех элементов на вебстранице. Иногда универсальный селектор указывать не обязательно. Например, запись.*class и.class в этих случаях совершенно идентичны. Теперь обязательно пример. Обычно наиболее распространенным является определение единого шрифта, размера и цвета, а также расположения обычного текста на странице блога или сайта.

* { font-family: Tahoma, Arial, Helvetica, sans-serif; /* Шрифт для текста */ color: #646464; /* Цвет текста */ font-size: 75%; /* Размер текста */ text-align: left; /* Расположение текста */ }

Таким образом можно определить оформление текста для всех элементов, которые расположены на странице. Отмечу, для данного случая результат будет аналогичным, если вместо универсального селектора использовать название тега body, в состав которого входят теги всех элементов.

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

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

Теперь возьмем абзац текста, определяемый тегом p, в который в качестве дочерних элементов будут входить теги b, i и big, определяющие форматирование текста, соответственно выделение жирным, курсивом и выделение путем увеличения шрифта:

В этом абзаце используются тег b, тег i, тег big.

И с помощью средства редактирования CSS и HTML, которое встроено в новейших версиях всех популярных браузеров ( , ) и которое является аналогом знаменитого плагина для браузера Firefox (), вставим этот абзац в любое место на абсолютно любой web-странице (я это сделал прямо на странице предыдущей статьи первым параграфом). Это средство, к примеру, в Хроме вызывается простым нажатием клавиши F12. Его можно использовать для практического закрепления материала рубрик «Основы HTML» и «Учебник CSS». Итак, я вставляю кусок текста в виде первого параграфа:

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

B+i {color: red;} i+big {color: green;}

После того, как эти стили будут применены, абзац будет выглядеть так:

Это справедливо для всех тегов вебстраницы, в состав которых входят элементы b, i и big. Причем, рядом обязательно должны находится b и i, i и big, для других сочетаний это CSS правило работать не будет. Я думаю, теперь вам ясно, как применяются соседние селекторы при написании или редактировании CSS документа. Еще одно очень важное замечание: если вы успели заметить, то в случае соседних элементов заданный стиль применяется только ко второму элементу.

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

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

H3 { font-size: 1.7em; /* Размер шрифта */ text-align: center; /* Размещение текста */ font-weight: normal; /* Нормальное начертание текста */ font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */ color: #646464; /* Цвет текста */ }

Для выделения заголовка примечания или сноски зададим особый класс, скажем, put:

H3.put { color: red; /* Цвет текста */ margin-left: 5px; /* Отступ слева */ margin-top: 0.5em; /* Отступ сверху */ padding: 10px; /* Поля вокруг текста */ text-align: left; /* Расположение текста */ }

Теперь воспользуемся соседними селекторами для создания особого стиля абзаца сноски, этот абзац будет размещаться непосредственно под заголовком со стилем «h3.put»:

H3.put+p { background: #ffefd5; /* Цвет фона */ margin-left: 15px; /* Отступ слева */ margin-right: 120px; /* Отступ справа */ margin-top: 0.5em; /* Отступ сверху */ padding: 5px; /* Поля вокруг текста */ }

Опять воспользовавшись инструментом для редактирования Google Chrome, которым я вам все уши прожужжал (но он того стоит), вписываем заголовок для сноски, не забыв проставить для него класс put:

Внимание!

Затем пишем текст самой сноски:

Материалы, представленные в данной публикации, являются очень важными в плане изучения основ CSS (каскадных таблиц стилей)

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

Теперь на блоге или сайте при привязке класса «put» к любому тегу h3 будет вырисовываться такая сноска на web-странице. Причем оформлен особым образом будет только первый абзац после тега h3 с «class=“put”». Но ведь именно этого мы и добивались, верно?

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

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

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

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

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

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

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

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

strong + i {

}
...

Это обычный текст. Это жирный текст, обычный текст, красный текст

Это обычный текст. Это жирный текст, обычный текст, и это обычный текст.

Результат:

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

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

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

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

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

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

Это обычный текст. Это жирный текст, обычный текст, а это красный текст.

Результат:

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

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

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

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

div > strong {

}
...

Это обычный текст. Это жирный курсивный текст .

Это обычный текст. А это обычный жирный текст.

И результат:

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

. А непосредственным родителем второго тега является тег

, поэтому правило на него не действует.

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

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

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

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

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

Это обычный текст. Это жирный курсивный текст .

Это обычный текст. А это тоже курсивный жирный текст.

Обычный текст и просто жирный текст

Результат:

Как видим, на этот раз правило подействовало на оба тега , даже на тот, который вложен и в контейнер

и в абзац

. На тег , который просто вложен в абзац

правило css никак не действует.

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

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

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

Имеет вид:

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

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

strong{
color:red;
}
...

Автомобиль это механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.

Результат:

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

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

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

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

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

a{
color:red;
font-size:150%;
}
...
.ru" target="_blank">Ссылка в новом окне

Результат:

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

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

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

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

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

{
color:red;
font-size:150%;
}
...

Наш телефон: 777-77-77

Наш адрес: Москва ул. Советская 5

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

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

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

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

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

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

{
color:red;
font-size:150%;
}
...

• Пункт 1


• Пункт 2


• Пункт 3


• Пункт 4

Результат:

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

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

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

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

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

a{
color:green;
font-weight:bold;
}
...

Результат:

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

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

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

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

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

IMG {
border: 5px solid red;
}
...

Картинка формата gif

Картинка формата png

Результат:

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

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

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

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

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

IMG {
border: 5px solid red;
}
...

Картинка из папки gallery

Картинка из другой папки

Результат:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проведем еще один эксперимент - заменим в нашем примере на :

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

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

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

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

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

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

Здесь дочерними являются тег по отношению к тегу

А также по отношению к . Тег по отношению к тегу

Дочерним не является, поскольку тот не является его непосредственным родителем.

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

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

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

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

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

В нашем случае тег не является дочерним для

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

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

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

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

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

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

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

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

Основными понятиями CSS являются стилевые правила, селекторы, свойства и их значения.

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

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

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

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

p { color: green; font-weight: bold; }

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

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

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

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

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

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

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

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

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

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

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

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