<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The target attribute gets a yellow background:</p>
<a href="http://www.freetimelearning.com" target="_blank">Target Link</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
The target attribute gets a yellow background:
Target LinkNote: For [attribute] to work in IE8 and earlier, a DOCTYPE must be declared.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The target attribute gets a yellow background:</p>
<a href="http://www.freetimelearning.com" target="_blank">Click Here!</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
The target attribute gets a yellow background:
Click Here!Note: For [attribute] to work in IE8 and earlier, a DOCTYPE must be declared.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[title~=myimages] {
border: 5px solid #0099da;
}
</style>
</head>
<body>
<p>All images with the title attribute containing the word "images" get a blue border.</p>
<img src="images/sample.jpg" title="Sample myimages" alt="Sample Image">
<img src="images/sample_11.jpg" title="Sample" alt="Sample Image">
<img src="images/sample_111.jpg" title="myimages" alt="Sample Image">
<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
All images with the title attribute containing the word "images" get a blue border.
Note: For [attribute~=value] to work in IE8 and earlier, a DOCTYPE must be declared.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[class|=top] {
background:#0099da; color:#FFF;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome FTL</h1>
<p class="top-text">Free Time Learning</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Free Time Learning
Are you learning CSS?
Note: For [attribute|=value] to work in IE8 and earlier, a DOCTYPE must be declared.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[class^="top"] {
background: #0099da; color:#FFF;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome FTL</h1>
<p class="top-text">Free Time Learning</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Free Time Learning
Are you learning CSS?
Note: For [attribute|=value] to work in IE8 and earlier, a DOCTYPE must be declared.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[class$="test"] {
background:#0099da; color:#FFF;
}
</style>
</head>
<body>
<h4 class="mytest">This is Sample [Attribute Selector] Text.</h4>
<h4 class="my">This is Sample [Attribute Selector] Text.</h4>
<h4 class="my-test">This is Sample [Attribute Selector] Text.</h4>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[class*="te"] {
background:#0099da; color:#FFF; padding:7px 10px;
}
</style>
</head>
<body>
<h3 class="test">Sample [Attribute Selector] Text</h3>
<h3 class="test">Sample [Attribute Selector] Text</h3>
<h3 class="my">Sample [Attribute Selector] Text</h3>
<h3 class="test">Sample [Attribute Selector] Text</h3>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Note: For [attribute|=value] to work in IE8 and earlier, a DOCTYPE must be declared.