Introduction
This Chapter demonstrates about the CSS Attributes which apply CSS Style based on an attribute and combination of its values, following are the concepts are covered in this chapter.
- CSS Attribute Selectors
Description
In order to use the style sheets which are have some attributes. CSS attribute Selector enables user to target elements based on any HTML attributes which are listed below.
- E[attribute] Attribute Selector.
- E[attribute="value"] Which is an Attribute Exact value Selector.
- E[attribute~="value"] Which is an Spaced List Attribute Selector.
- E[attribute*="value"] Which contains Attribute Selector.
- E[attribute^="value"] Which begins with Attribute Selector.
- E[attribute|="value"] Which Hyphenated List Attribute Selector.
Description
In order to assign the CSS style to an element which has an particular attribute i.e the selector E[attribute]. In which value of the attribute is not important and the first part of the selector is the Element and the next part is square brackets i.e attributes. The code below demonstrates the CSS Attribute Selector as shown.
[html]
<!DOCTYPE HTML>
<html>
<head>
<style>
img[alt] /* Selects "img" elements "alt" attribute */
{
border:10px solid #eee;
box-shadow:5px 5px 5px #ccc;
transform:rotate(2deg);
-ms-transform:rotate(2deg); /* for IE 9 */
-webkit-transform:rotate(2deg); /* for Safari and Google Chrome */
}
</style>
</head>
<body>
<img alt="splessons" src="splessons.jpg" />
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In order to apply CSS styles to element which have same attribute value then user can use the selector E[attribute="value"]. If the elements get selected the attribute equal to exact value then the CSS Style will be applied. The code below demonstrates Attribute exact value selector.
[html]
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
input[type="text"]
{
border:3px solid #0000ff;
width:300px;
}
</style>
<head>
<body>
Tutorial : <input type="text" name="name">
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
E[attribute~="value"] is known as the Spaced List Attribute Selector which are used to apply CSS style based on the attribute value in a list of space separated words or value. If any exact match occurs between attributes values and space separated list of values then only CSS Style will be applied.
Ex img[alt~="splessons"] will select elements only with alt equal to "splessons" and not with others.
The code below demonstrates the Begins with Attribute Selector as shown.
[html]
<!DOCTYPE HTML>
<html>
<head>
<style>
img[alt~="splessons"] /* Selects "img" elements "alt" attribute with value splessons */
{
border:10px solid #0000ff;
box-shadow:5px 5px 5px #ccc;
}
</style>
</head>
<body>
<img alt="splessons" src="splessons.jpg" />
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Which is used to apply CSS Styles to elements where the attribute contain complete words or parts of words. If the value occurs anywhere with in the attribute then the style will be applies to an element.
Ex img[alt="splessons"] will slect elements with alt equal to "splessons" or "splessons tutorial".
The code below demonstrates CSS Contain attribute.
[html]
<!DOCTYPE HTML>
<html>
<head>
<style>
img[alt*="twitter"] /* Selects "img" elements "alt" attribute with value twitter */
{
border:10px solid #0000ff;
box-shadow:5px 5px 5px #ooooff;
}
</style>
</head>
<body>
<img alt="splessons" src="splessons.jpg" height="150" width="150"/>
<img alt="splessons" src="splessons.jpg"
<img alt="splessons" src="splessons.jpg" height="150" width="150"/>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Where the attribute value begins with the exact string then these selector applies the CSS styles to the element. In which carlet symbol "^" is known as the "Begins with".
Ex. a[href^="http://"] which can be used to target all external links beginning with http://. but it wont target the links which are strting with https://.
The code below demonstrates the CSS Begins with Attribute as shown below.
[html]
<!DOCTYPE HTML>
<html>
<head>
<style>
a[href^="http://"] /* selects elements with href attribute
value beginning with [http://] */
{color:0000ff;
font-family:Verdana, Arial;}
</style>
</head>
<body>
<a href="http://www.splessons.com/">SPLESSONS</a>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
I f user clicked on the above link it will redirect to the splessons page as shown in below image.
Description
Where the attributes value is similar or exactly or value immediately followed by hyphen then which selector applies the CSS styles to elements. Generally which is used for matching the languages codes.
Ex a[hreflang|="en"] it will select some elements all elements with hreflang equal to "en" or "en-us" or "en-GB"
The code below demonstrates the Hyphenated List Attribute as shown below.
[html]
<!DOCTYPE HTML>
<html>
<head>
<style>
a[hreflang|="en"] /* Selects "img" elements "alt" attribute with value twitter */
{
color:#0000ff;
font-family: Verdana;
}
</style>
</head>
<body>
<a hreflang="en"> English</a><br>
<a hreflang="en-US"> English USA</a><br>
<a hreflang="en-GB"> English Great Britain</a><br>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Type selector used to define the basic style for entire website.
- asterisk "*" is used before the equal to sign.
- For the element to be selected target value must be at the beginning of the string.