[onclick]{ cursor:pointer; }
Все элементы, на которые навешено событие onclick при помощи одноимённого атрибута, при наведении выделятся курсором в виде пальчика.
Позволяет гибко оформлять элементы форм.
input[type="text"], input[type="password"]{ width:300px; border:1px solid green; }
— оформление текстовых полей.
input[type="submit"], input[type="button"]{ width:30px; height:21px; padding:0 0 0 30px; overflow:hidden; cursor:pointer; border:none; background:url('button.gif') no-repeat; color:transparent; }
— оформление кнопок.
input[type="submit"][disabled], input[type="button"][disabled], input[type="submit"][disabled]:hover, input[type="button"][disabled]:hover{ cursor:default; }
— оформление неактивной (disabled) кнопки; здесь для неё отменяется курсор «пальчик», назначенный активным кнопкам, но можно также подложить другой фон, сделать другой цвет, рамку, и пр.
input[type="checkbox"], input[type="radio"]{ margin:0 5px 0 0; vertical-align:middle; }
— оформление переключателей и флажков.
Также позволяет при необходимости выделить один элемент по уникальному значению атрибута, например, картинку по её урлу:
img[src="myPicture.gif"]{ border:2px solid red; }
Интересно, что ИЕ может не понять запись [type="text"]
, если ей не предшествует селектор по типу элемента (input
). Так же ИЕ не понимает запись:
td[colspan]
в обязательном порядке требуя указать значение атрибута:
td[clospan="3"]
а также не понимает селекторы с атрибутом style
.
А ие7 почему-то не понимает конструкцию с атрибутом «for»:
label[for="field_name"]
Селектор равенства атрибута может применяться для атрибутов class и id:
определение [class="myClass"]
== определению . myClass
.
При этом вес определений [id="myId"]
и #myId
будет разным в силу разной специфичности селекторов.
a[rel~="nofollow"]{ text-decoration:none; border-bottom:1px dotted 1px; } a[rel~="external"]{ padding:0 15px 0 0; background:url('external.gif') no-repeat 100% 0; } a[rel~="my"]{ padding:0 15px 0 0; background:url('home.gif') no-repeat 100% 0; } a[rel~="friend"]{ padding:0 15px 0 0; background:url('heart.gif') no-repeat 100% 0; }
a[href^="javascript"]{ cursor:move; }
— выделит формой указателя мыши ссылки, содержащие Javascript.
[href^="/"]{ color:green; }
— выделит указанным цветом только внутренние ссылки.
[href^="http"]{ padding:0 15px 0 0; background:url('outbound.gif') no-repeat 100% 0; }
— пометит пиктограммкой ссылки, ведущие на другие сайты.
[href^="ftp"]{ padding:0 15px 0 0; background:url('ftp.gif') no-repeat 100% 0; }
— отметит пиктограммкой ссылки на FTP.
[href$='jpg'], [href$='gif'], [href$='png']{ padding:0 15px 0 0; background:url('pic.gif') no-repeat 100% 0; } [href$='zip'], [href$='rar'], [href$='gz']{ padding:0 15px 0 0; background:url('zip.gif') no-repeat 100% 0; } [href$='exe']{ padding:0 15px 0 0; background:url('exe.gif') no-repeat 100% 0; }
— позволит
img[alt*="Пушкин"]{ border:1px solid red; }
— выделит красной рамкой все картинки со словом «Пушкин» в атрибуте alt;
a[href*="2011"]{ text-decoration:none; border-bottom:3px double #000; } -подчеркивание двойной линией линк с заданными цифрами
Автор текста - Юлия Панина
Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER