HTML/CSS/Style Basics/Sibling Selector — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Текущая версия на 08:17, 26 мая 2010

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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Sibling_Selector&oldid=5967»