В 2 селектор – Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега

Market — D2SELECTOR.RU

Добро пожаловать в магазин!

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

Система Selector Market^TradeIn

С помощью данной системы Вы можете моментально продать предметы сайту и получить деньги на баланс в размере до 80-и% от стоимости предметов в Steam. Деньги можно вывести на удобный Вам электронный кошелек, либо обменять на другие товары внутри нашего маркета.

• x 12

  Prismatic: Rubiline

  Prismatic: Rubiline

  3640.00

• x 7

  Scorching Talon

  Scorching Talon

  3317.60

• x 5

  Golden Infernal Chieftain

  Golden Infernal Chieftain

  2925.43

• x 14

  Foulfell Corruptor

  Foulfell Corruptor

  2853.50

• x 7

  Fervid Monarch

  Fervid Monarch

  2599.99

• x 8

  Outland Ravager

  Outland Ravager

  2541.47

• x 13

  Bladeform Legacy Bundle

  Bladeform Legacy Bundle

  1948.40

• x 9

  Tempest Helm of the Thundergod Bundle

  Tempest Helm of the Thundergod Bundle

  1946.72

• x 10

  Frost Avalanche Bundle

  Frost Avalanche Bundle

  1935.23

• x 6

История раздач — D2SELECTOR.RU

Правила — D2SELECTOR.RU

Правила использования сайта

Правила и особенности:

1. Регистрируясь на сайте, вы подтверждаете то, что вы согласны с правилами сайта и соглашаетесь с тем, что администрация сайта может изменить эти правила в любой момент без предупреждения.
2. Все вещи, которые вы передаете боту являются добровольными пожертвованиями.
3. В случае блокировки бота со стороны Steam мы имеем право не выплачивать компенсацию по утраченым предметам.
4. Максимальный депозит предметов в одной игре указан в описании выбраной комнаты.
5. Комиссия системы варьируется от 1 до 10 процентов в зависимости от величины выигрыша.
6. Выдача выигрыша передается сразу в автоматическом режиме. В редких случаях время выдачи может затянуться до нескольких минут.
7. Если вы не забрали выигрыш в течении 30 минут и получили ошибку, он аннулируется. Это необходимо, что бы инвентарь бота не забивался.
8. Каждый раз отправляя предметы, Вы соглашаетесь с правилами использования сайта.
9. Если Ваш инвентарь закрыт или Вы указали не верную ссылку на инвентарь, то выйгрыш аннулируется и предметы не будут отправлены заново.
10. Максимальное время игры регулируется правилами выбранной комнаты.
11. Принимаются вещи только для Dota 2. Если при передачи депозита будут предметы из других игр или сервиса Steam, такие передачи будут отклоняться в автоматическом режиме.
12. Мы можем гарантировать правильную оценку стоимости вещи только тогда, когда она есть на Торговой площадке Steam, иначе ваш предмет может быть неверно оценен.
13. Запрещено ставить сувенирные предметы исключая сувенирные наборы, такие передачи отменяются.
14. Мы оставляем за собой право высылать выигрыш случайными предметами эквивалентно сумме выигрыша, в случае, если по нашей вине выигрыш не был доставлен вовремя.
15. Мы не несем ответственности за вещи, которые хранятся в Вашем локальном инвентаре в случае блокировок со стороны Steam или иных инцидентов, на разрешение которых мы не может повлиять.
16. Запросы в техническую поддержку будут рассматриваться только если они были сделаны в тот же день, когда произошла ошибка.
17. Если вы вносите предмет, цена на который на торговой площадке Steam имеет резкие скачки в цене, в таком случае при неправильном определении цены предметы возвращены не будут.
18. Если вы играете во время лагов стима, то в случае неполучения выйгрыша вещи возвращены не будут! Подождите, пока стим перестанет лагать.

Конфиденциальность:

1. Мы не храним каких-либо данных пользователя, кроме логина в Steam и Вашу ссылку на инвентарь.
2. Аватар и Ваш ник доступны всем пользователям сервиса в реальном времени.

Пользовательское соглашение | Сайт не является азартной игрой и не связан с Valve и Steam.
Copyright © Рулетка Дота 2 — D2SELECTOR.RU

Terms of service — D2SELECTOR.COM

Текст настоящего Пользовательского соглашения, постоянно размещенный в сети Интернет по сетевому адресу: http://d2selector.ru/tos, содержит все существенные условия Соглашения — договора присоединения, и является публичной офертой, содержащей условия, на которых Пользователям предоставляется возможность использовать Сайт, постоянно размещенный в сети Интернет по сетевому адресу: http://d2selector.ru. Акцептом настоящей оферты является совершение любым физическим лицом действий по авторизации в соответствии с положениями настоящего Соглашения. Авторизация на сайте http://d2selector.ru осуществляется через учетную запись Пользователя в сообществе STEAM. Однако Сайт и STEAM являются разными ресурсами, не подчиненными один другому.

ВНИМАНИЕ! Если Вы не согласны с условиями настоящего Пользовательского Соглашения, не авторизуйтесь на Сайте http://d2selector.ru и не используйте сервисы данного Сайта.

1. ТЕРМИНЫ И ОПРЕДЕЛЕНИЯ.

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

1.1.1. Сайт — совокупность информации, текстов, графических элементов, дизайна, изображений, фото и видеоматериалов и иных результатов интеллектуальной деятельности, а также программ для ЭВМ, содержащихся в информационной системе, обеспечивающей доступность такой информации в сети Интернет по сетевому адресу http://d2selector.ru. Сайт является Интернет-ресурсом, предназначенным для оказания развлекательно-аттракционных услуг физическим лицам.

1.1.2. Соглашение – настоящее Пользовательское Соглашение, являющееся Публичной офертой, в целом без изъятий и оговорок.

1.1.3. Администратор – лицо, в коммерческом управлении которого находится Сайт. Услуги Сайта оказываются от имени

Selector L.G.C.

Страна — Curaçao (CW)

Регистрационный номер компании – 171157

Адрес регистрации — Heelsumstraat 51 E-Commerce Park.

Email: [email protected]

1.1.4. Пользователь – лицо, заключившее с Администратором Соглашение, путем акцепта настоящей оферты, расположенной в сети Интернет по сетевому адресу http://d2selector.ru/tos. Сотрудники Администратора и родственники таких сотрудников не вправе акцептовать настоящую оферту и заключать Соглашение.

1.1.5. Стороны – Администратор и Пользователь, являющиеся Сторонами настоящего Соглашения.

1.1.6. Услуга – действия Администратора по организации работы Сайта и предоставлению Пользователю на возмездной и/или безвозмездной основе возможности проведения досуга в виде участия в играх и развлечениях с использованием сервисов Сайта

1.1.7. Монета – виртуальная игровая единица Сайта, используемая в процессе оказания Администратором /получения Пользователем Услуги Сайта. Виртуальные игровые единицы – Монеты Сайта https://d2selector.ru – используются только в рамках Сайта и не могут быть предметом каких бы то ни было сделок и операций вне Сайта. Приобретение Пользователем виртуальных игровых единиц – Монет – осуществляется только на Сайте и по правилам, указанным в настоящем Соглашении

1.1.8. Скин – виртуальный игровой атрибут (виртуальный инвентарь) многопользовательской сетевой игры (программное обеспечение) Counter-Strike: Global Offensive, DOTA 2 На Сайте возможно использование виртуальных игровых атрибутов (виртуального инвентаря сетевой игры Counter-Strike: Global Offensive, DOTA 2 ):

— имеющихся у Пользователя в профиле Steam;

— приобретенный Пользователем на возмездной основе на Сайте;

— предоставленный Администратором Пользователю на безвозмездной основе по правилам Сайта.

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

1.1.9. Ставка — электронный документ, формируемый с помощью сервисов Сайта по указанию Пользователя, совершенным им на Сайте по средством специальных программных команд. Указанный электронный документ – Ставка – служит целям оформления/фиксации участия Пользователя, совершившего конкретную Ставку, в том или ином Раунде развлекательных безрисковых игр на Сайте. Ставки формируются с использованием (списанием) Монет и Скинов.

1.1.10. Раунд – временной отрезок/часть игр, составляющих Услуги Сайта. Каждый раунд имеет момент начала и момент завершения. В ходе каждого раунда Пользователи могут совершать Ставки и узнавать результат игры в текущем Раунде.

1.1.11. Виртуальный игровой баланс (Баланс) – сумма Скинов и/или Монет отображаемый в виртуальных единицах сайта, для удобства Пользователя, данный Баланс становится доступен после авторизации пользователя на Сайте Администратора.

1.2. Все остальные термины и определения, встречающиеся в тексте настоящего Соглашения, толкуются Сторонами в контексте значения терминов, указанных в п. 1.1. настоящего Соглашения, и в соответствии со сложившимися в сети Интернет обычными правилами толкования соответствующих терминов, не противоречащим положениям настоящего Соглашения.

1.3. Названия заголовков (статей) настоящего Соглашения предназначены исключительно для удобства пользования текстом Соглашения и буквального юридического значения не имеют.

1.4. В случае разночтений/несовпадений в трактовке терминов и определений в тексте настоящего Соглашения и в тексте правил и норм, размещенных на Сайте (например, в разделе F.A.Q. Сайта) применяется и считается приоритетным толкование, содержащееся в тексте настоящего Соглашения (Публичной оферты).

2. ПРЕДМЕТ СОГЛАШЕНИЯ.

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

2.2. Лицо, акцептовавшее настоящую оферту, становится Пользователем и обязуется использовать Сайт только на условиях настоящего Соглашения.

2.3. Пользователь гарантирует, что он/она не страдает от зависимости от азартных игр.

2.4. Пользователь гарантирует, что он/она не является гражданином и не заходит на сайт с территории указанных ниже стран: США, Австралия, Гонконг, Индия, Индонезия, Япония, Малайзия, Сингапур.

2.5. Пользователь гарантирует, что осведомлен о законах онлайн-азартных игр в своей стране пребывания. Доступ Пользователя к Сайту не означает, что он/она может использовать Услуги на законных основаниях своей юрисдикции. В случае неосведомленности пользователя или сознательного использования Сайта в разрез законодательства юрисдикции страны нахождения Пользователя, Пользователь сам принимает на себе риски такого использования Сайта.

2.6. Пользование Услугами Сайта лицами, не обладающими полной дееспособностью (как по возрасту, так и по состоянию здоровья) в соответствии с нормами и законами соответствующей юрисдикции (страны пребывания физического лица) ЗАПРЕЩЕНО.

3. ЗАКЛЮЧЕНИЕ, ИЗМЕНЕНИЕ, РАСТОРЖЕНИЕ СОГЛАШЕНИЯ

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

3.2. Настоящее Соглашения считается заключенным с момента авторизации Пользователя на Сайте через учетную запись Пользователя в сообществе STEAM, Google +, VK, Twitter, Facebook, Yandex (далее может использоваться определение Сообщества) При этом, Сайт и STEAM, Google +, VK, Twitter, Facebook, Yandex – это разные ресурсы, управляемые не аффилированными лицами.

3.2.1. Администратор сможет идентифицировать Пользователя в сообществе STEAM, Google +, VK, Twitter, Facebook, Yandex, получить открытую в сообществе STEAM, Google +, VK, Twitter, Facebook, Yandex информацию о Пользователе. При авторизации Пользователя на Сайте через учетную запись в STEAM, Google +, VK, Twitter, Facebook, Yandex Сайту передается уникальный числовой идентификатор/либо e-mail, но не закрытые данные, указанные Пользователем в сообществе, которое он использовал для авторизации.

3.2.2. Авторизуя

CSS селекторы и их типы на видеокурсе от Loftblog

Добро пожаловать на второй урок нашего видеокурса по основам CSS. Сегодняшний видеоурок мы посвятим одному из самых важных понятий CSS — селекторам. Рассмотрим под микроскопом, на какие типы они подразделяются и как записываются.

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

Различают следующие типы селекторов CSS:

• 1) универсальные селекторы,
• 2) селекторы по названию тега,
• 3) селекторы по классу,
• 4) селекторы по id,
• 5) селекторы по атрибуту,
• 6) селекторы потомков, или контекстные селекторы,
• 7) селекторы дочерние (только первые),
• 8) селекторы сестринские, или соседние (расположенные на одном уровне),
• 9) селекторы псевдоклассов (селекторы состояния),
• 10) селекторы псевдоэлементов.

На видеоуроке будет подробно рассмотрен каждый тип селекторов CSS в отдельности

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

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

* {
font-size: 16px;
}

CSS селекторы по названию тега

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

h2 {
color: red;
}

где h2 — селектор по названию тега.

CSS селекторы по классам

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

.main-header {
background-color: #99ffcc;
}

CSS селекторы по id

К атрибутам HTML-тегов относится и id. Атрибут этот применяется к индивидуальному элементу, т.е. элемент с id может быть в единственном экземпляре на странице согласно правилам семантики. В каскадных таблицах стилей атрибуты эти используются крайне редко, их применение к ним вообще не приветствуется, они предназначены в основном для работы с javascript. На всякий случай полезно знать. что селектор по id в CSS-правиле оформляется так:

#heading {
font-size: 35px;
}

CSS селекторы по атрибутам

Далее будут рассмотрены CSS селекторы по атрибутам HTML-тегов. Их запись также не представляет особой сложности:

a[href = "https://loftblog.ru/"] {
color: black;
}

CSS селекторы потомков, или контекстные селекторы

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

.wraping p {
padding: 15px;
}

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

Дочерние селекторы CSS отличаются от селекторов потомков тем, что под дочерним подразумевается только первый потомок, никакие «внуки» и «правнуки» не попадают в эту категорию.

.wraping>p {
`padding: 15px;
}

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

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

h2 + p {
padding-bottom: 30px;
}

CSS селекторы псевдоклассов

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

a:hover {
text-decoration: none;
}

CSS селекторы псевдоэлементов

И последними на сегодняшнем видеоуроке будут рассмотрены CSS селекторы псевдоэлементов. Их прелесть заключается в том, что с их помощью (::before, ::after) можно добавлять различные элементы на веб-странички, но при этом псевдоэлементы никак не будут отражены в HTML-разметке этих страниц. Записываются они по отношению к элементу через двойное двоеточие.

p::first-letter{
color: red;
}

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Рекомендуемые курсы

Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега

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

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

Комбинаторы в 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>

И результат:

Как видно на рисунке, правило стиля подействовало только на первый тег <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>

Результат:

Как видим, на этот раз правило подействовало на оба тега <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=»//webcodius.ru» target=»_self»>Обычная ссылка</a> | <a href=»//webcodius.ru» target=»_blank»>Ссылка в новом окне</a></p>

Результат:

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

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

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

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

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

[class~=»tel»]{
color:red;
font-size:150%;
}
…
<p>Наш телефон: <span>777-77-77</span></p>
<p>Наш адрес: <span>Москва ул. Советская 5</span></p>

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

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

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

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

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

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

[class|=»menu»]{
color:red;
font-size:150%;
}
…
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>

Результат:

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

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

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

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

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

a[href^=»http://»]{
color:green;
font-weight:bold;
}
…
<p><a href=“//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 стили к дочерним тегам;
• символ <пробел> формирует контекстные селекторы.

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

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