Bardzo ciekawym selektorem w CSS jest tzw. selektor atrybutu. Za pomocą przytoczonego selektora możesz wskazać np. dany element (kontrolkę) formularza bez stosowania dodatkowego oznaczenia elementu za pomocą klasy czy identyfikatora.
W praktyce ma to znaczący wpływ na optymalizację kodu zarówno samego HTML-a jak i CSS.
Składnia:
[atrybut]{
właściwości CSS;
}
Przykłady zastosowania.
Dla wszystkich elementów posiadających atrybut title ustaw kolor czcionki na zielony:
[title]{
color: green;
}
Dla wszystkich elementów posiadających atrybut alt ustaw odpowiednie obramowanie:
[alt]{
border: 1px solid green;
}
Zaawansowane przykłady operujące na wybranych typach pól formularzy:
input[type='submit']{
padding:4px;
color:gray;
border:1px solid gray;
border-radius:2px;
width:260px;
background-color:lightgray;
}
input[type='checkbox']{
padding:4px;
border:1px solid gray;
border-radius:2px;
width:10px;
margin-bottom:6px;
}