HTML/CSS/Style Basics/Sibling Selector
Содержание
Add tag together
<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>
<title></title>
<style type="text/css">
div {
position: absolute;
padding: 10px;
border: 1px solid black;
opacity: 0.9;
background: #ccc;
width: 100px;
height: 100px;
top: 20px;
left: 20px;
z-index: 4;
}
div + div {
background: lightblue;
top: 40px;
left: 40px;
z-index: 3;
}
div + div + div {
background: lightgreen;
top: 60px;
left: 60px;
z-index: 2;
}
div + div + div + div {
background: pink;
top: 80px;
left: 80px;
z-index: 1;
}
</style>
</head>
<body>
</body>
</html>
</source>
direct adjacent sibling combinator
<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">
h2 ~ h3 {
text-decoration: underline;
font-size: 22px;
color: lightgreen;
}
</style>
</head>
<body>
Welcome to CSS widgets.
This paragraph of text is indented 20 pixels.
Some underlined text.
</body>
</html>
</source>
Direct Adjacent Sibling Combinators
<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">
label + input, label + select, label + textarea {
background: darkgray;
}
</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>
img+p
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<style type="text/css"> h1 {
margin: 0 0 .3em 0; padding: 0 0 .3em 0; border-bottom: 2px solid #666;
} img+p {
text-indent: 0;
} p {
margin: 0; padding: 0; text-indent: 2.5em; line-height: 1.5;
} img {
border: 1px solid red; width: 60%; max-width: 300px; float: left; margin-right: .7em; margin-bottom: .5em;
}
</style>
</head> <body>
Constantly Checking Email
<img src="face.jpg" />
</body>
</html>
</source>
li + li
<source lang="html4strict">
<html> <head> <title>li + li </title> <style type="text/css">
li + li {
font-size: 200%;
}
-->
</style> </head> <body>
Title of Page
This is a sample paragraph with a <a href="http://www.wbex.ru" class="warning">link</a>. After p. in em. After em.
</body> </html>
</source>
Sibling Selector with +
<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"> li + li { font-style:italic; color:blue; } </style> </head> <body>
p.my-class
- div ol li
- div ol li
-
div ol li p.my-class
</body> </html>
</source>
