liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のセレクタ - 結合子

・E F : 子孫結合子。E 要素の子孫であるすべての F 要素。

・E > F : 子結合子。E 要素の子であるすべての F 要素。

・E + F : 隣接兄弟結合子。E 要素の直後に現れる F 要素

・E ~ F : 一般兄弟結合子。E 要素のあとに現れる F 要素


・E F : 子孫結合子

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>子孫結合子</title>
   <style type="text/css">
    /* div全体 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* div内の子孫要素a */
    div .a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>div要素</div>
<div><div class="a">divの子要素でclassの値がa</div></div>
<div><section><div class="a">divの孫要素でclassの値がa</div></section></div>
<p class="a">p要素のclassの値がa</p>
</body>
</html>

f:id:liguofeng29:20160127203106p:plain

・E > F : 子結合子。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>子結合子</title>
   <style type="text/css">
    /* div全体 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* div内の子要素a */
    div>.a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>div要素</div>
<div><div class="a">divの子要素でclassの値がa</div></div>
<div><section><div class="a">divの孫要素でclassの値がa</div></section></div>
</body>
</html>

f:id:liguofeng29:20160127203305p:plain

・E + F : 隣接兄弟結合子

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>隣接兄弟結合子</title>
   <style type="text/css">
    /* div全体 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* divの隣接a */
    div + .a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>div要素</div>
<div class="a">div要素の直後のclassの値がa</div>
<section><div class="a">div要素の直後でないclassの値がa</div></section>
</body>
</html>

f:id:liguofeng29:20160127203957p:plain

・E ~ F : 一般兄弟結合子

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 一般兄弟結合子 </title>
   <style type="text/css">
        /* idがlanの後のclassがframeworkの要素 */
        #lan ~ .framework{
            background-color: #00FF00;
        }
    </style>
</head>
<body>
<div>
    <p class="framework">struts : classがframeworkだがid=lanの前</p>
    <div id="lan">java</div>
    <div>c</div>
    <p class="framework">spring</p>
    <div id="lan">c#</div>
    <div class="framework">seasar</div>
</div>
</body>
</html>

f:id:liguofeng29:20160127204409p:plain