http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FStyle_Basics%2Fattribute_selector
HTML/CSS/Style Basics/attribute selector - История изменений
2026-04-04T13:25:13Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/attribute_selector&diff=5946&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/attribute_selector&diff=5947&oldid=prev
Admin: 1 версия
2010-05-26T08:17:25Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==A blockquote with a cite attribute displayed with CSS==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
blockquote[cite]:after {<br />
content: "Source: " attr(cite);<br />
}<br />
</style><br />
</head><br />
<body><br />
<blockquote cite="http://j.ru"><br />
<p>this is a test. <i>j.ru</i> this is a test. .</p><br />
</blockquote><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Attribute Selectors for form controls==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<style type="text/css"><br />
<br />
option[value] {<br />
letter-spacing: 2px; <br />
}<br />
option[value="newspaper"] {<br />
background: orange; <br />
}<br />
option[value="magazine"] {<br />
background: red;<br />
}<br />
option[value="television"] {<br />
background: black;<br />
}<br />
option[value="radio"] {<br />
background: green;<br />
}<br />
option[value="other"] {<br />
background: blue;<br />
}<br />
input[name$="[name]"] {<br />
color: darkred;<br />
}<br />
input[name$="[email]"] {<br />
color: darkblue;<br />
}<br />
textarea[name$="[address]"] {<br />
color: purple;<br />
}<br />
textarea[name$="[message]"] {<br />
color: black;<br />
}<br />
select[name$="[heard]"] {<br />
color: darkgreen;<br />
}<br />
input[name^="feedback"], select[name^="feedback"], textarea[name^="feedback"] {<br />
font-weight: bold;<br />
}<br />
</style><br />
<title>Feedback Form - Widgets and What"s-its</title><br />
</head><br />
<body><br />
<h1>Widgets and What"s-its</h1><br />
<form><br />
<h2>Tell us what"s on your mind..</h2><br />
<div><br />
<label for="feedback[heard]">How"d you hear about us?</label> <br />
<select name="feedback[heard]"><br />
<option value="">Choose...</option><br />
<option value="newspaper">Newspaper</option><br />
<option value="magazine">Magazine</option><br />
<option value="television">Television</option><br />
<option value="radio">Radio</option><br />
<option value="other">Other</option><br />
</select><br />
</div><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Attribute Substring Selectors==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Attribute Substring Selectors</title><br />
<style rel="stylesheet" type="text/css"><br />
a[href^="ftp://"] {<br />
color: goldenrod;<br />
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;<br />
}<br />
a[href*="#"] {<br />
color: cadetblue;<br />
background: red;<br />
}<br />
a[href$=".html"] {<br />
color: dodgerblue;<br />
background: pink;<br />
}<br />
a[href$=".pdf"] {<br />
color: red;<br />
background: yellow;<br />
} <br />
</style><br />
</head><br />
<body><br />
<a href="index.html">HTML Page Link</a><br />
<a href="document.pdf">PDF Link</a><br />
<a href="ftp://www.example.ru/">FTP Link</a><br />
<a href="http://www.example.ru/#note">Anchor Link</a><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Attribute Substring Selectors: a[href*="#"]==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Attribute Substring Selectors</title><br />
<style rel="stylesheet" type="text/css"><br />
a[href*="#"] {<br />
color: cadetblue;<br />
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;<br />
}<br />
</style><br />
</head><br />
<body><br />
<a href="index.html">HTML Page Link</a><br />
<a href="document.pdf">PDF Link</a><br />
<a href="ftp://www.example.ru/">FTP Link</a><br />
<a href="http://www.example.ru/#note">Anchor Link</a><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Attribute Substring Selectors: a[href^="ftp://"]==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Attribute Substring Selectors</title><br />
<style rel="stylesheet" type="text/css"><br />
a[href^="ftp://"] {<br />
color: goldenrod;<br />
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<a href="index.html">HTML Page Link</a><br />
<a href="document.pdf">PDF Link</a><br />
<a href="ftp://www.example.ru/">FTP Link</a><br />
<a href="http://www.example.ru/#note">Anchor Link</a><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Attribute Substring Selectors: a[href$=".html"]==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Attribute Substring Selectors</title><br />
<style rel="stylesheet" type="text/css"><br />
a[href$=".html"] {<br />
color: dodgerblue;<br />
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;<br />
}<br />
</style><br />
</head><br />
<body><br />
<a href="index.html">HTML Page Link</a><br />
<a href="document.pdf">PDF Link</a><br />
<a href="ftp://www.example.ru/">FTP Link</a><br />
<a href="http://www.example.ru/#note">Anchor Link</a><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Attribute Substring Selectors: a[href$=".pdf"]==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Attribute Substring Selectors</title><br />
<style rel="stylesheet" type="text/css"><br />
a[href$=".pdf"] {<br />
color: red;<br />
background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;<br />
} <br />
</style><br />
</head><br />
<body><br />
<a href="index.html">HTML Page Link</a><br />
<a href="document.pdf">PDF Link</a><br />
<a href="ftp://www.example.ru/">FTP Link</a><br />
<a href="http://www.example.ru/#note">Anchor Link</a><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==input[type="password"][name="password"]==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Attribute Selectors</title><br />
<style rel="stylesheet" type="text/css"><br />
input[type="password"][name="password"] {<br />
background: crimson;<br />
color: pink;<br />
border: 3px solid pink;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<form method="post" action=""><br />
<fieldset><br />
<legend>Feedback Form</legend><br />
<table><br />
<tbody><br />
<tr><br />
<td><br />
<label for="first-name">First Name:</label><br />
</td><br />
<td><br />
<input type="text"<br />
name="first_name"<br />
id="first-name"<br />
value=""<br />
size="25" /><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<label for="last-name">Last Name:</label><br />
</td><br />
<td><br />
<input type="text"<br />
name="last_name"<br />
id="last-name"<br />
value=""<br />
size="25" /><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<label for="account-password">Password:</label><br />
</td><br />
<td><br />
<input type="password"<br />
name="password"<br />
id="account-password"<br />
size="25"<br />
value="" /><br />
</td><br />
</tr><br />
</tbody><br />
</table><br />
</fieldset><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==input[type="text"]==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Attribute Selectors</title><br />
<style rel="stylesheet" type="text/css"><br />
<br />
input[type="text"] {<br />
background: blue;<br />
color: lightblue;<br />
border: 3px solid lightblue;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<form method="post" action=""><br />
<fieldset><br />
<legend>Feedback Form</legend><br />
<table><br />
<tbody><br />
<tr><br />
<td><br />
<label for="first-name">First Name:</label><br />
</td><br />
<td><br />
<input type="text"<br />
name="first_name"<br />
id="first-name"<br />
value=""<br />
size="25" /><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<label for="last-name">Last Name:</label><br />
</td><br />
<td><br />
<input type="text"<br />
name="last_name"<br />
id="last-name"<br />
value=""<br />
size="25" /><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<label for="account-password">Password:</label><br />
</td><br />
<td><br />
<input type="password"<br />
name="password"<br />
id="account-password"<br />
size="25"<br />
value="" /><br />
</td><br />
</tr><br />
</tbody><br />
</table><br />
</fieldset><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==input[type="text"][name="last_name"]==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>Attribute Selectors</title><br />
<style rel="stylesheet" type="text/css"><br />
input[type="text"][name="last_name"] {<br />
background: forestgreen;<br />
color: yellowgreen;<br />
border: 3px solid yellowgreen;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<form method="post" action=""><br />
<fieldset><br />
<legend>Feedback Form</legend><br />
<table><br />
<tbody><br />
<tr><br />
<td><br />
<label for="first-name">First Name:</label><br />
</td><br />
<td><br />
<input type="text"<br />
name="first_name"<br />
id="first-name"<br />
value=""<br />
size="25" /><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<label for="last-name">Last Name:</label><br />
</td><br />
<td><br />
<input type="text"<br />
name="last_name"<br />
id="last-name"<br />
value=""<br />
size="25" /><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<label for="account-password">Password:</label><br />
</td><br />
<td><br />
<input type="password"<br />
name="password"<br />
id="account-password"<br />
size="25"<br />
value="" /><br />
</td><br />
</tr><br />
</tbody><br />
</table><br />
</fieldset><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Matches are case sensitive and must match letter-for-letter including whitespace==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p[title="#4 paragraph"] {<br />
font-weight: bold;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p title="#4 paragraph"><code>p[title="#4 paragraph"]</code> selects<br />
all paragraphs with a title attribute containing the exact text, <code>#4<br />
paragraph</code>. </p><br />
<br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==p[title="myPara"] selects all paragraphs with a title attribute containing the exact text, myPara==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p[title="myPara"] {<br />
font-weight: bold;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p title="myPara"><code>p[title="myPara"]</code> selects<br />
all paragraphs with a title attribute containing the exact text, <code>#4<br />
paragraph</code>. </p><br />
<br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==p[title~="paragraph"] selects all paragraphs with a title attribute containing the word, paragraph.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p[title~="paragraph"] {<br />
background-color: gold;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p title="Third paragraph"><code>p[title~="paragraph"]</code><br />
selects all paragraphs with a title attribute containing the word, <code>paragraph</code>.</p><br />
<br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==p[title] selects all paragraphs containing a title attribute.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p[title] {<br />
padding: 5px 10px;<br />
border: 1px solid gray;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p title="Second"><code>p[title]</code> selects all paragraphs<br />
containing a title attribute.</p><br />
<br />
</body> <br />
</html><br />
</source></div>
Admin