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>
・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>
・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>
・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>