What are CSS attributes

Attribute selectors are part of the CSS2 / CSS3 specification and are extremely effective. They allow things that could only be done with Javascript until now.

Attribute selectors relate to the attributes of elements. You can address these attributes (in bold in the example) and specifically define the representation of the associated elements.
Example: src = ”" old = ”" /> or href = ”"title = ”" >

The following list shows the use of the various attribute selectors based on a link whose title attribute has the value 'foobar'.
title = "foobar" > Intensstation.ch


Matches an element a with the attribute title.


Matches an element a with attribute title and the exact value foobar.


Matches an element a with attribute title, whose list separated by spaces of values ​​containing foobar. Would also apply to the attribute value "foobar baz blah".


Matches an element a with attribute title, whose by Hyphens (-) separated list of values ​​containing foobar.


Matches an element a with attribute title, whose Value begins with foobar. Would also apply to the attribute value foobarbaz.


Matches an element a with attribute title, whose Value ends with foobar. Would also apply to the attribute value bazfoobar.


Matches an element a with attribute title, its value foobar anywhere in the string contains.

Examples with attribute selectors

In fact, almost anything can be addressed with attribute selectors.

Links with a specific file type

This example can be applied to any file type.

Here you can download a PDF, Word DOC, Excel File XLS

a [href $ = '. pdf'] {padding: 0 0 0 25px; background: url (icons / pdf.gif) no-repeat center left; } a [href $ = '. doc'], a [href $ = '. docx'], a [href $ = '. DOC'] {padding: 0 0 0 25px; background: url (icons / doc.gif) no-repeat center left; } a [href $ = '. xls'] {padding: 0 0 0 25px; background: url (icons / xls.gif) no-repeat center left; }

Attributes whose value ends with a certain word

In this example, the title attribute is addressed, the value of which has the word monorom at the end.

HTML
<a href="/" title="CSS von monorom" >CSS von monorom</a>
CSS a [title $ = "monorom"] {
border: 1px solid # ff6677;
padding: 4px;
    }

CSS by monorom
Danger: Upper and lower case must be observed, otherwise it will not work.

A certain word somewhere in the attribute

In this example, the title attribute is addressed, in which the word super occurs anywhere in the value.

HTML
is monorom happy CSS
a [title * = "super"] {
border: 2px solid # 3F3132;
padding: 4px;
}

monorom is super happy. yes monorom is happy.

Attributes whose value starts with a certain word

For example, all external links can be addressed with attribute selectors

CSS intensive care unit a [href ^ = "http: //"] {background: url (icons / external.png) center right no-repeat; padding-right: 13px; }

http://intensivstation.ch/

Addressing a specially defined attribute

Selectors on the type attribute of an input element replace classes that were previously always needed to do justice to the different types (text, radio, checkbox).

Attribute selectors are particularly suitable for forms. You can select them according to the title attribute or, as in the following example, address the input type directly. You can also combine these applications without any problems or only address special inputs of the type text in which a certain word occurs in the title. The definition can then be made dependent on the context in order to restrict the representation to a specific area.

input {border: 1px solid # DB7093; width: 300px;} input [type = 'radio'] {border: none; width: auto;} input [type = 'checkbox'] {border: none; width: auto;}

Catch banners and hide them using CSS.

img [width = "468"] [height = "60"], img [width = "468px"] [height = "60px"] {display: none; }