CSSを記述していると、以前に指定したCSSが記述されたり、要素名のCSSが反映されたりと別の指定したCSSも一緒に読み込まれ、思うようにいかないことがあります。今日はそんな中でCSSでタグの直下にくる子要素にのみ、CSSを適用させたい場合について記述していきたいと思います。7月9日記事
目次
div id="main"の中にあるp要素に対して指定したい場合は次のように記述することでできると思います。
HTML部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>子セレクター指定の練習</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
<p>mainの子要素</p><!--子セレクター-->
<div id="inner">
<p>mainの孫要素</p><!--孫セレクター-->
</div>
</div>
</body>
</html>
CSS部
@charset "utf-8";
/* CSS Document */
#main{
width: 100px;
height: 100px;
border: 1px solid #000;
}
#main p{
color: #f00;
}
すると次のような表示になります。
それでは、直下の子要素のみ赤字にさせて、孫要素は引き継がないためにはどのような形で記述すればよろしいでしょうか？
子要素のみを指定したい場合、mainとpの間に>を入れていきます。
すると、#mainの配下にあるpに適用ではなく、
mainの直下のpにのみ適用させるという記述方法になります。
mainと>とpの間スペースはつけてもつけなくてもいいですが、つけたほうが見やすいのでスペースを付けるようにしておきます。
CSS部
@charset "utf-8";
/* CSS Document */
#main{
width: 100px;
height: 100px;
border: 1px solid #000;
}
#main > p{
color: #f00;
}
すると次のように子のpに対してのみ適用され、孫のpには適用されません。
別のセレクターの記述が読まれたりしてしまった場合や、明示的に指定したい場合は>を付けるようにしましょう。
以上
