<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <link rel="stylesheet" href="css/ad.css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ $("input").click(function(){ $(":header:not(h1)").css({ color:"#FF0000", borderLeft:"10px solid #FF0000", borderBottom:"3px dotted #FF0000", paddingLeft:"10px", paddingBottom:"5px" }); //下の記述はpの子要素にあたる:headerフィルターには反映しないので不可 /* $("article :header, p :header").css({ color:"#FF0000", borderLeft:"10px solid #FF0000", borderBottom:"3px dotted #FF0000", paddingLeft:"10px", paddingBottom:"5px" }); */ }); }); </script> </head> <body> <p>ボタンをクリックして、article要素の子要素にあたる:headingフィルター、p要素の子要素にあたる:headerフィルターにスタイルをつけなさい。</p> <input type="button" value="click"> <h1>h1要素 h1要素 h1要素 h1要素 </h1> <article> <h2>h2要素2 h2要素 h2要素 h2要素 </h2> article要素 article要素 article要素 article要素 article要素 <br> article要素 article要素 article要素 article要素 article要素 <h3>h3要素2 h3要素 h3要素 h3要素 </h3> article要素 article要素 article要素 article要素 article要素 <br> article要素 article要素 article要素 article要素 article要素 </article> <p> <h2>h2要素2 h2要素 h2要素 h2要素 </h2> p要素 p要素 p要素 p要素 p要素 <br> p要素 p要素 p要素 p要素 p要素 <h3>h3要素2 h3要素 h3要素 h3要素 </h3> p要素 p要素 p要素 p要素 p要素 <br> p要素 p要素 p要素 p要素 p要素 </p> </body> </html>