[Go] property selector. Mark

CSS 2 introduces the property selector.

The property selector can select elements based on their attributes and property values.

Simple attribute Selection

If you want to select an element that has a property, regardless of the property value, you can use the Simple property selector.

Example 1

If you want to turn all the elements that contain the title into red, you can write:

*[title] {color:red;}

Try it yourself.

Example 2

Similar to the above, you can apply styles only to anchors with an href attribute (a element):

A[href] {color:red;}

Try it yourself.

Example 3

You can also choose from multiple properties by linking the property selector together.

For example, to set the text of an HTML hyperlink that has both an href and a title property to red, you can write:

A[href][title] {color:red;}

Try it yourself.

Example 4

This feature can be used in some creative ways.

For example, you can apply styles to all images with an ALT attribute to highlight these valid images:

Img[alt] {border:5px solid red;}

Try it yourself.

Tip: This special case is better for diagnosing than designing, which is to determine if the image is actually valid.

Example 5: Using the attribute selector for an XML document

The property selector is useful in XML documents because the XML language advocates specifying element and attribute names for the purpose of elements and attributes.

Suppose we designed an XML document for describing the solar system planets. If we want to select all the planet elements with the moons attribute so that they appear red so that we can focus more on the planets with moons, you can write:

Planet[moons] {color:red;}

This causes the text of the second and third elements in the following markup fragment to appear red, but the text of the first element is not red:

moons= "2" >Mars</planet>

View Effects

Select based on specific attribute values

In addition to selecting elements that have certain properties, you can further narrow down the selection, selecting only the elements that have specific attribute values.

Example 1

For example, suppose you want to turn a hyperlink that points to a specified document on a WEB server into red, so you can write:

A[href= "Http://www.w3school.com.cn/about_us.asp"] {color:red;}

Try it yourself.

Example 2

Like a simple property selector, you can link multiple Property-value selectors together to select a document.

a[href= "http://www.w3school.com.cn/"][title= "W3school"] {color:red;}

This changes the text of the first hyperlink in the following markup to red, but the second or third link is not affected:

Title= "W3school" >w3school</a><a href= "http://www.w3school.com.cn/css/" title= "CSS" >CSS</a> <a href= "http://www.w3school.com.cn/html/" title= "html" >HTML</a>

Try it yourself.

Example 3

Similarly, the XML language can use this method to set styles.

Let's go back to the example of the planet. Suppose you want to select only those planet elements with the Moons property value of 1:

planet[moons= "1"] {color:red;}

The code above turns the second element in the following markup into red, but the first and third elements are unaffected:

moons= "1" >earth</planet><planet moons= "2" >Mars</planet>

View Effects

Property must match the property value exactly

Note that this format requirement must match the property value exactly.

If the property value contains a space-delimited list of values, the match can be problematic.

Consider the tag fragment:

Class= "Important warning" >this paragraph is a very important warning.</p>

If written as p[class= "important", then this rule does not match the sample tag.

To select the element based on a specific property value, you must write this:

P[class= "Important warning"] {color:red;}

Try it yourself.

Select based on partial attribute values

If you need to select from a word in the list of words in the attribute value, you need to use the tilde (~).

Assuming you want to select the element that contains important in the class attribute, you can do this with this selector:

P[class~= "Important"] {color:red;}

Try it yourself.

If you omit the tilde, you need to complete the full value match.

The difference between the partial value attribute selector and the point number class name notation

This selector is equivalent to the point class name notation we discussed in the class selector.

In other words, p.important and p[class= "important" are equivalent when applied to an HTML document.

So why do you have a "~=" property selector? Because it can be used for any property, not just class.

For example, you can have a document that contains a large number of images, only part of which is a picture. For this, you can use a partial property selector based on the title document to select only these pictures:

Img[title~= "Figure"] {border:1px solid gray;}

This rule selects all images with the title text containing "figure". Images that do not have a title attribute or that do not contain "figure" in the title attribute do not match.

Try it yourself.

Substring Matching Property Selector

Here's a more advanced selector module, which is published after CSS2, and contains more of the partial value property selectors. According to the specification, it should be called "substring matching attribute selector".

Many modern browsers support these selectors, including IE7.

The following table is a brief summary of these selectors:

type	Description
[abc^= "Def"]	Select all elements with the ABC attribute value beginning with "Def"
[abc$= "Def"]	Select all elements with the ABC attribute value ending with "def"
[abc*= "Def"]	Select all elements of the ABC attribute value that contain the substring "def"

It can be thought that these options have many uses.

For example, if you want to apply a style to all links to W3school, you do not have to specify class for all of the links, and then you write the style based on that class, and you only need to write the following rules:

A[href*= "w3school.com.cn"] {color:red;}

Try it yourself.

Tip: Any property can use these selectors.

Specific attribute selection type

Finally, we introduce you to a specific property selector. Take a look at the following example:

*[lang|= "en"] {color:red;}

The above rule selects all elements that have the lang attribute equal to en or that begin with en-. Therefore, the first three elements in the following example markup will be selected without selecting the last two elements:

<p lang= "en" >hello!</p><p lang= "en-US" >greetings!</p><p lang= "en-au" >G " Day!</p><p lang= "FR" >bonjour!</p><p lang= "Cy-en" >Jrooana!</p>  

Try it yourself.

In general, [att|= "Val"] can be used for any property and its value.

Suppose you have a series of images in an HTML document, where each picture's file names are like figure-1.jpg and figure-2.jpg. You can use the following selectors to match all of these images:

Img[src|= "Figure"] {border:1px solid gray;}

Try it yourself.

Of course, the most common use of this property selector is to match the language value.

CSS Selector Reference Manual Selector

Selector	Description
[attribute]	Used to select an element with the specified attribute.
[attribute=value]	Used to select an element with the specified attributes and values.
[attribute~=value]	Used to select the element in the attribute value that contains the specified vocabulary.
[attribute|=value]	Used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[attribute^=value]	Matches each element of the property value to the beginning of the specified value.
[attribute$=value]	Matches each element of the property value to the end of the specified value.
[attribute*=value]	Matches each element of the property value that contains the specified value.

[Go] property selector. Mark