http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FStyle_Basics%2FChild_Selector
HTML/CSS/Style Basics/Child Selector - История изменений
2026-04-04T18:45:15Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Child_Selector&diff=5956&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/Child_Selector&diff=5957&oldid=prev
Admin: 1 версия
2010-05-26T08:17:26Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Apply styles to label elements, but only if they appear inside of an input form==<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><br />
<head><br />
<style type="text/css"><br />
form label {<br />
display: block;<br />
font-weight: bold;<br />
margin: 5px;<br />
width: 225px;<br />
text-align: right;<br />
background: black;<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[name]">Name:</label><br />
<input type="text" size="25" name="feedback[name]" /><br />
</div><br />
<div><br />
<label for="feedback[email]">Email:</label><br />
<input type="text" size="25" name="feedback[email]" /><br />
</div><br />
<div><br />
<label for="feedback[address]">Address:</label><br />
<textarea name="feedback[address]" cols="40" rows="3" wrap="virtual"></textarea><br />
</div><br />
<div><br />
<label for="feedback[message]">Comments:</label><br />
<textarea name="feedback[message]" cols="40" rows="6" wrap="virtual"></textarea><br />
</div><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 />
==Child Selector Demo==<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 />
#my-id > * { border:3px solid black; } <br />
</style><br />
</head><br />
<body> <br />
<p class="my-class">p.my-class</p> <br />
<div id="my-id"> <br />
<ol> <br />
<li>div ol li</li> <br />
<li>div ol li</li> <br />
<li> <br />
<p class="my-class">div ol li p.my-class </p> <br />
</li> <br />
</ol> <br />
</div> <br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Direct Child Selectors==<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 />
form > div > label {<br />
float: left;<br />
}<br />
form > div {<br />
clear: left;<br />
}<br />
div > input, div > select {<br />
margin: 3px;<br />
padding: 4px;<br />
}<br />
select > option {<br />
padding: 4px;<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[name]">Name:</label><br />
<input type="text" size="25" name="feedback[name]" /><br />
</div><br />
<div><br />
<label for="feedback[email]">Email:</label><br />
<input type="text" size="25" name="feedback[email]" /><br />
</div><br />
<div><br />
<label for="feedback[address]">Address:</label><br />
<textarea name="feedback[address]" cols="40" rows="3" wrap="virtual"></textarea><br />
</div><br />
<div><br />
<label for="feedback[message]">Comments:</label><br />
<textarea name="feedback[message]" cols="40" rows="6" wrap="virtual"></textarea><br />
</div><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 />
==Set style for direct child==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Set style for direct child</title><br />
<style type="text/css"><br />
p > strong {<br />
text-decoration: underline;<br />
} <br />
</style><br />
<body><br />
<div><br />
<p>Nothing happens to this part of the sentence because this <br />
<strong>strong</strong> isn"t the direct child of div.</p> <br />
However, this <strong>strong</strong> is the child of div. <br />
Therefore, it receives the style dictated in the CSS rule.<br />
</div><br />
<body><br />
</source><br />
<br />
<br />
<br />
<br />
==Use > to mark a direct relationship==<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 />
html>body #navsite ul li a { <br />
width: auto; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="navsite"><br />
<p>Site navigation:</p><br />
<ul><br />
<li><a href="">Home</a></li><br />
<li><a href="">About</a></li> <br />
<li><a href="">Archives</a></li><br />
<li><a href="">Writing</a></li><br />
<li><a href="">Speaking</a></li><br />
<li><a href="">Contact</a></li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source></div>
Admin