Малоизвестные полезности в css

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

Как-то просматривая стиль на одном сайте, наткнулся на строчку вида
input[type="button"] { применение стиля }.
Столкнулся с таким впервые, и ессно начал методом тыка разузнавать подробней.

В итоге:
Можно разукрасить поля ввода.
К примеру на венике гостевая. Там при добавлении сообщения три поля ввода, имена которых author (ник), message (сообщение) и code (код с картинки).
Пишем в стиле:
input[name="author"] {background-image: url("/dir/.../image.gif"); background-repeat: no-repeat /*чтоб картинка не повторялась, ибо смотреться хреново будет*/ }
Подробней:
В стиле указано input[name="author"] {...}
То есть если в html коде страницы встретиться поле ввода input, с атрибутом name, значение которого равно author, то будет применен отдельный стиль, в данном случае бэкграунд-картинка.
Так же само можете сделать и для остальных полей ввода, имена их перечислены выше.
Но это так сказать более идентификационно, то есть только для одного поля ввода, для ввода ника. А если нужно к примеру во всех полях ввода добавить черный фон и белый текст?
Тогда пишем
input[type="text"] {background: #000; color: white}
то есть для всех полей ввода текста (type="text").

Несколько атрибутов со значениями.
input[type="text"][name="other"] {...}
В данном случае стиль будет применяться к полю ввода только в том случае, если тип равен "text" а имя равно "other". Только в том случае будет применятся стиль.

Атрибут без элемента.
[align="center"] {color:red}
В данном случае красный цвет будет между теми тегами, у которых align="center"
Это может быть и <div> и <span> и <p>, но если он имеет атрибут align значение которого center, то содержимое будет красного цвета.

Используя это всё, уберем средствами css рекламную ссылку на хомяке, которая имеет вид httр://a2.h2m.ru/i.php, иногда а1.
Код:
a[href="httр://a2.h2m.ru/i.php"], a[href="httр://a1.h2m.ru/i.php"] {visibility: hidden}
Таким макаром скрыли ссылки с пред ясных очей посетителей, но они остались в коде страницы. То бишь если бы средствами php вырезали ссылки, то можно было бы и без акка остаться, а так... И ссылки в коде, и не видно их :smile

К примеру многие пользуются на венике сервисами от мастокса. Там тоже вверху ихняя реклам.ссылка, но она не статичная как в хомяке, а генерируемая. Но начинается она с httр://ваппц.ру.
В этом случае:
[атрибут^="значение"] {... }
этом случае атрибут должен лишь начинаться с указанного значения, а не обязательно содержать его целиком.
То есть пишем
a[href^="httр://ваппц.ру"] {visibility: hidden}
в итоге все ссылки начинающиеся с ваппц.ру будут скрыты. Так обошли случайно генерируемое окончние ссылки.
Но иногда и окончание ссылки играет роль. К примеру вы хотите выделить все ссылки с доменом.ru зеленым, а.соm красным:
[атрибут$="значение"] {... }
Аналогично ^, с той разницей, что здесь атрибут должен заканчиваться указанным значением, то есть.ru или.соm
В итоге:
a[href$=".ru"] {color:green}

[атрибут*="значение"] {... }
Такая запись показывает, что значение может встречаться в любом месте атрибута, необязательно вначале или в конце.
Правда с масками, типа *^$ браузеры работают не все. Опера 4.2 работает, а вот остальные не уверен. С абсолютом (как в примере с хомяком) работают большинство, а вот с масками... Ну да применение всё равно найти можно.

Вот собсно и всё))
Еще раз пардон за плохое оформление, не было времени более четко обьяснять, да и не смог бы. Но кто хоть более-менее знаком с css - поймет суть. Задавайте вопросы по теме, коль знаю -обьясню.

URL: https://visavi.net/articles/148