HTML/CSS/Style Basics/attribute selector
Содержание
- 1 A blockquote with a cite attribute displayed with CSS
- 2 Attribute Selectors for form controls
- 3 Attribute Substring Selectors
- 4 Attribute Substring Selectors: a[href*="#"]
- 5 Attribute Substring Selectors: a[href^="ftp://"]
- 6 Attribute Substring Selectors: a[href$=".html"]
- 7 Attribute Substring Selectors: a[href$=".pdf"]
- 8 input[type="password"][name="password"]
- 9 input[type="text"]
- 10 input[type="text"][name="last_name"]
- 11 Matches are case sensitive and must match letter-for-letter including whitespace
- 12 p[title="myPara"] selects all paragraphs with a title attribute containing the exact text, myPara
- 13 p[title~="paragraph"] selects all paragraphs with a title attribute containing the word, paragraph.
- 14 p[title] selects all paragraphs containing a title attribute.
A blockquote with a cite attribute displayed with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
blockquote[cite]:after {
content: "Source: " attr(cite);
}
</style>
</head>
<body>
<blockquote cite="http://j.ru">
<p>this is a test. <i>j.ru</i> this is a test. .</p>
</blockquote>
</body>
</html>
Attribute Selectors for form controls
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
option[value] {
letter-spacing: 2px;
}
option[value="newspaper"] {
background: orange;
}
option[value="magazine"] {
background: red;
}
option[value="television"] {
background: black;
}
option[value="radio"] {
background: green;
}
option[value="other"] {
background: blue;
}
input[name$="[name]"] {
color: darkred;
}
input[name$="[email]"] {
color: darkblue;
}
textarea[name$="[address]"] {
color: purple;
}
textarea[name$="[message]"] {
color: black;
}
select[name$="[heard]"] {
color: darkgreen;
}
input[name^="feedback"], select[name^="feedback"], textarea[name^="feedback"] {
font-weight: bold;
}
</style>
<title>Feedback Form - Widgets and What"s-its</title>
</head>
<body>
<h1>Widgets and What"s-its</h1>
<form>
<h2>Tell us what"s on your mind..</h2>
<div>
<label for="feedback[heard]">How"d you hear about us?</label>
<select name="feedback[heard]">
<option value="">Choose...</option>
<option value="newspaper">Newspaper</option>
<option value="magazine">Magazine</option>
<option value="television">Television</option>
<option value="radio">Radio</option>
<option value="other">Other</option>
</select>
</div>
</form>
</body>
</html>
Attribute Substring Selectors
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Attribute Substring Selectors</title>
<style rel="stylesheet" type="text/css">
a[href^="ftp://"] {
color: goldenrod;
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;
}
a[href*="#"] {
color: cadetblue;
background: red;
}
a[href$=".html"] {
color: dodgerblue;
background: pink;
}
a[href$=".pdf"] {
color: red;
background: yellow;
}
</style>
</head>
<body>
<a href="index.html">HTML Page Link</a>
<a href="document.pdf">PDF Link</a>
<a href="ftp://www.example.ru/">FTP Link</a>
<a href="http://www.example.ru/#note">Anchor Link</a>
</body>
</html>
Attribute Substring Selectors: a[href*="#"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Attribute Substring Selectors</title>
<style rel="stylesheet" type="text/css">
a[href*="#"] {
color: cadetblue;
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;
}
</style>
</head>
<body>
<a href="index.html">HTML Page Link</a>
<a href="document.pdf">PDF Link</a>
<a href="ftp://www.example.ru/">FTP Link</a>
<a href="http://www.example.ru/#note">Anchor Link</a>
</body>
</html>
Attribute Substring Selectors: a[href^="ftp://"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Attribute Substring Selectors</title>
<style rel="stylesheet" type="text/css">
a[href^="ftp://"] {
color: goldenrod;
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;
}
</style>
</head>
<body>
<a href="index.html">HTML Page Link</a>
<a href="document.pdf">PDF Link</a>
<a href="ftp://www.example.ru/">FTP Link</a>
<a href="http://www.example.ru/#note">Anchor Link</a>
</body>
</html>
Attribute Substring Selectors: a[href$=".html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Attribute Substring Selectors</title>
<style rel="stylesheet" type="text/css">
a[href$=".html"] {
color: dodgerblue;
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;
}
</style>
</head>
<body>
<a href="index.html">HTML Page Link</a>
<a href="document.pdf">PDF Link</a>
<a href="ftp://www.example.ru/">FTP Link</a>
<a href="http://www.example.ru/#note">Anchor Link</a>
</body>
</html>
Attribute Substring Selectors: a[href$=".pdf"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Attribute Substring Selectors</title>
<style rel="stylesheet" type="text/css">
a[href$=".pdf"] {
color: red;
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;
}
</style>
</head>
<body>
<a href="index.html">HTML Page Link</a>
<a href="document.pdf">PDF Link</a>
<a href="ftp://www.example.ru/">FTP Link</a>
<a href="http://www.example.ru/#note">Anchor Link</a>
</body>
</html>
input[type="password"][name="password"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Attribute Selectors</title>
<style rel="stylesheet" type="text/css">
input[type="password"][name="password"] {
background: crimson;
color: pink;
border: 3px solid pink;
}
</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Feedback Form</legend>
<table>
<tbody>
<tr>
<td>
<label for="first-name">First Name:</label>
</td>
<td>
<input type="text"
name="first_name"
id="first-name"
value=""
size="25" />
</td>
</tr>
<tr>
<td>
<label for="last-name">Last Name:</label>
</td>
<td>
<input type="text"
name="last_name"
id="last-name"
value=""
size="25" />
</td>
</tr>
<tr>
<td>
<label for="account-password">Password:</label>
</td>
<td>
<input type="password"
name="password"
id="account-password"
size="25"
value="" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>
input[type="text"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Attribute Selectors</title>
<style rel="stylesheet" type="text/css">
input[type="text"] {
background: blue;
color: lightblue;
border: 3px solid lightblue;
}
</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Feedback Form</legend>
<table>
<tbody>
<tr>
<td>
<label for="first-name">First Name:</label>
</td>
<td>
<input type="text"
name="first_name"
id="first-name"
value=""
size="25" />
</td>
</tr>
<tr>
<td>
<label for="last-name">Last Name:</label>
</td>
<td>
<input type="text"
name="last_name"
id="last-name"
value=""
size="25" />
</td>
</tr>
<tr>
<td>
<label for="account-password">Password:</label>
</td>
<td>
<input type="password"
name="password"
id="account-password"
size="25"
value="" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>
input[type="text"][name="last_name"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Attribute Selectors</title>
<style rel="stylesheet" type="text/css">
input[type="text"][name="last_name"] {
background: forestgreen;
color: yellowgreen;
border: 3px solid yellowgreen;
}
</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Feedback Form</legend>
<table>
<tbody>
<tr>
<td>
<label for="first-name">First Name:</label>
</td>
<td>
<input type="text"
name="first_name"
id="first-name"
value=""
size="25" />
</td>
</tr>
<tr>
<td>
<label for="last-name">Last Name:</label>
</td>
<td>
<input type="text"
name="last_name"
id="last-name"
value=""
size="25" />
</td>
</tr>
<tr>
<td>
<label for="account-password">Password:</label>
</td>
<td>
<input type="password"
name="password"
id="account-password"
size="25"
value="" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>
Matches are case sensitive and must match letter-for-letter including whitespace
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p[title="#4 paragraph"] {
font-weight: bold;
}
</style>
</head>
<body>
<p title="#4 paragraph"><code>p[title="#4 paragraph"]</code> selects
all paragraphs with a title attribute containing the exact text, <code>#4
paragraph</code>. </p>
</body>
</html>
p[title="myPara"] selects all paragraphs with a title attribute containing the exact text, myPara
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p[title="myPara"] {
font-weight: bold;
}
</style>
</head>
<body>
<p title="myPara"><code>p[title="myPara"]</code> selects
all paragraphs with a title attribute containing the exact text, <code>#4
paragraph</code>. </p>
</body>
</html>
p[title~="paragraph"] selects all paragraphs with a title attribute containing the word, paragraph.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p[title~="paragraph"] {
background-color: gold;
}
</style>
</head>
<body>
<p title="Third paragraph"><code>p[title~="paragraph"]</code>
selects all paragraphs with a title attribute containing the word, <code>paragraph</code>.</p>
</body>
</html>
p[title] selects all paragraphs containing a title attribute.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p[title] {
padding: 5px 10px;
border: 1px solid gray;
}
</style>
</head>
<body>
<p title="Second"><code>p[title]</code> selects all paragraphs
containing a title attribute.</p>
</body>
</html>