HTML/CSS/Style Basics/Sibling Selector
Содержание
Add tag together
<!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>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</body>
</html>
direct adjacent sibling combinator
<!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>
<div>
<h2>
Welcome to CSS widgets.
</h2>
<p>
This paragraph of text is indented 20 pixels.
</p>
<h3>
Some underlined text.
</h3>
</div>
</body>
</html>
Direct Adjacent Sibling Combinators
<!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>
<h1>Widgets and What"s-its</h1>
<form>
<h2>Tell us what"s on your mind..</h2>
<div>
<label for="feedback[name]">Name:</label>
<input type="text" size="25" name="feedback[name]" />
</div>
<div>
<label for="feedback[email]">Email:</label>
<input type="text" size="25" name="feedback[email]" />
</div>
<div>
<label for="feedback[address]">Address:</label>
<textarea name="feedback[address]" cols="40" rows="3" wrap="virtual"></textarea>
</div>
<div>
<label for="feedback[message]">Comments:</label>
<textarea name="feedback[message]" cols="40" rows="6" wrap="virtual"></textarea>
</div>
<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>
img+p
<!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>
<div id="frame">
<h1>Constantly Checking Email</h1>
<img src="face.jpg" />
</div>
</body>
</html>
li + li
<html>
<head>
<title>li + li </title>
<style type="text/css">
li + li {
font-size: 200%;
}
-->
</style>
</head>
<body>
<h1>Title of Page</h1>
<p>This is a sample paragraph with a <a href="http://www.wbex.ru" class="warning">link</a>. After p. <em class="warning"> in em</em>. After em.</p>
<ul id="navigation">
<li class="warning"><a href="http://www.wbex.ru">A</a></li>
<li><a href="http://www.wbex.ru">B</a></li>
<li><a href="http://www.wbex.ru">C</a></li>
</ul>
</body>
</html>
Sibling Selector with +
<!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 class="my-class">p.my-class</p>
<div id="my-id">
<ol>
<li>div ol li</li>
<li>div ol li</li>
<li>
<p class="my-class">div ol li p.my-class </p>
</li>
</ol>
</div>
</body>
</html>