no-prof

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

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 тоже реализуется с помощью атрибутов.