HTML/CSS/Style Basics/Child Selector
Содержание
Apply styles to label elements, but only if they appear inside of an input form
<source lang="html4strict">
<!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">
form label {
display: block;
font-weight: bold;
margin: 5px;
width: 225px;
text-align: right;
background: black;
}
</style>
<title>Feedback Form - Widgets and What"s-its</title>
</head>
<body>
Widgets and What"s-its
<form>
Tell us what"s on your mind..
<label for="feedback[name]">Name:</label>
<input type="text" size="25" name="feedback[name]" />
<label for="feedback[email]">Email:</label>
<input type="text" size="25" name="feedback[email]" />
<label for="feedback[address]">Address:</label>
<textarea name="feedback[address]" cols="40" rows="3" wrap="virtual"></textarea>
<label for="feedback[message]">Comments:</label>
<textarea name="feedback[message]" cols="40" rows="6" wrap="virtual"></textarea>
<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>
</form> </body>
</html>
</source>
Child Selector Demo
<source lang="html4strict">
<!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">
- my-id > * { border:3px solid black; }
</style> </head> <body>
p.my-class
- div ol li
- div ol li
-
div ol li p.my-class
</body> </html>
</source>
Direct Child Selectors
<source lang="html4strict">
<!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">
form > div > label {
float: left;
}
form > div {
clear: left;
}
div > input, div > select {
margin: 3px;
padding: 4px;
}
select > option {
padding: 4px;
}
</style>
<title>Feedback Form - Widgets and What"s-its</title>
</head>
<body>
Widgets and What"s-its
<form>
Tell us what"s on your mind..
<label for="feedback[name]">Name:</label>
<input type="text" size="25" name="feedback[name]" />
<label for="feedback[email]">Email:</label>
<input type="text" size="25" name="feedback[email]" />
<label for="feedback[address]">Address:</label>
<textarea name="feedback[address]" cols="40" rows="3" wrap="virtual"></textarea>
<label for="feedback[message]">Comments:</label>
<textarea name="feedback[message]" cols="40" rows="6" wrap="virtual"></textarea>
<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>
</form> </body>
</html>
</source>
Set style for direct child
<source lang="html4strict">
<html>
<head> <title>Set style for direct child</title>
<style type="text/css"> p > strong {
text-decoration: underline;
} </style> <body>
Nothing happens to this part of the sentence because this strong isn"t the direct child of div.
However, this strong is the child of div.
Therefore, it receives the style dictated in the CSS rule.
<body>
</source>
Use > to mark a direct relationship
<source lang="html4strict">
<!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"> html>body #navsite ul li a {
width: auto;
} </style> </head> <body>
</body> </html>
</source>
