ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте
Стать модераторомОтзывы

Предложения
На форуме идут технические работы. Кое-что кое-где может отображаться криво. Мы скоро всё поправим. :)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Гайд: CSS селекторы атрибутов

Сообщений 1 страница 1 из 1

1

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

[attribute]
воздействует на элементы, у которых есть специфический атрибут.
Пример:

Код:
a[target] {
  color: #000;
}

Этот код воздействует на все ссылки (<a>), у которых есть атрибут target (причем значение target может быть любым)


[attribute="value"]
воздействует на элементы, у которых есть конкретный атрибут И конкретное значение этого атрибута.
Пример:

Код:
a[target="_blank"] {
  color: #000;
}

Этот код воздействует на все ссылки (<a>), которые открывают ссылки в новой вкладке (т.е. у которых есть атрибут target со значением _blank)
Еще пример:

Код:
a[href="https://forumd.ru/profile.php?id=2"] {
  color: #000;
}

Такой код воздействует на все ссылки (<a>), которые открывают страницу моего профиля: Герда


[attribute~="value"]
такой селектор нужен, чтобы воздействовать на элементы, содержащие специфическое слово.
Пример:

Код:
img [title~="flower"] {
  border: 5px solid #000;
}

Такой код воздействует на все картинки, в которые вшиты заголовки со словом "flower": title="flower", title="summer flower" или title="flower new".
НО НЕ воздействует на заголовки типа title="my-flower" или title="flowers".


[attribute|="value"]
используется, чтобы воздействовать на элементы со специальным атрибутом, который НАЧИНАЕТСЯ с определенного значения.
Пример:

Код:
div[class|="top"] {
  background: yellow;
} 

Такой код воздействует на все блоки (<div>), в которых есть класс, начинающийся с "top".
НО! Чтобы работало, у элемента должен быть либо одиночный класс class="top", либо начало класса должно быть отделено дефисом, например: class="top-text".


[attribute^="value"]
похож на предыдущий: воздействует на элементы со специальным атрибутом, который НАЧИНАЕТСЯ с определенного значения, но не обязательно отделено дефисом.
Пример:

Код:
div[class^="top"] {
  background: yellow;
} 

Такой код воздействует на все блоки (<div>), в которых есть класс, начинающийся с "top": class="top", class="top-text" или class="toplefttextconteiner" - значение не обязано быть целым словом.


[attribute$="value"]
используется, чтобы воздействовать на элементы со специальным атрибутом, который ЗАКАНЧИВАЕТСЯ определенным значением.
Пример:

Код:
div[class$="top"] {
  background: yellow;
} 

Такой код воздействует на все блоки (<div>), в которых есть класс, заканчивающийся на "top": class="top", class="text-top" или class="lefttop" - значение не обязано быть целым словом.

Еще  пример:

Код:
a[href$="/profile.php?id=2"] {
  color: #000;
}

Такой код воздействует на все ссылки (<a>), которые открывают страницу моего профиля на обоих адресах: http://forumd.ru/profile.php?id=2 и http://forumdesign.0pk.ru/profile.php?id=2
НЕ воздействует на ссылки, типа http://forumd.ru/profile.php?id=2355


[attribute*="value"]
создействует на элементы, которые СОДЕРЖАТ определенное значение.
Пример:

Код:
div[class*="te"] {
  background: yellow;
}

Такой код воздействует на все блоки (<div>), в которых есть класс, содержащий буквы "te": class="text", class="text-test" или class="containerterrible" - значение не обязано быть целым словом.

Еще  пример:

Код:
a[href*="/profile.php?"] {
  color: #000;
}

Такой код воздействует на все ссылки (<a>), которые открывают профили, в том числе и такие ссылки как: http://forumd.ru/profile.php?section=signature&id=2


Применение
Такие коды чаще всего используются для создания стиля форм и кнопок.
Например:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Цветовыделение ников и аватарок на CSS тоже реализуется с помощью атрибутов.

+1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."