<!DOCTYPE html>
<html lang="ja">
<!-- Head tag -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/png" href="https://contents.ogatism.net/ogatism.png">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<!--Description-->
<meta name="description" content="cssでよく使われるnth-childというセレクタがあります。
要素の何番目かを表す値で、２番目の色はこれ、３番目の色はこれと指定できます。
2n+1とか数学みたいな式を書くことで一つ飛びとかも実現できます。
が、これ罠があって。
別のタグでもカウントされてしまうのですよ。">
<!--Author-->
<meta name="author" content="Yuji Ogata">
<!--Open Graph Title-->
<meta property="og:title" content="【CSS注意点】別タグでもカウントされるnth-childの罠"/>
<!--Open Graph Site Name-->
<meta property="og:site_name" content="ogatism"/>
<!--Page Cover-->
<meta property="og:image" content=""/>
<!-- Title -->
<title>【CSS注意点】別タグでもカウントされるnth-childの罠 - ogatism</title>
<style>
</style>
<!-- Custom CSS -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-43476132-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-43476132-1');
</script>
<meta name="generator" content="Hexo 5.4.1"><link rel="alternate" href="/feed.xml" title="ogatism" type="application/atom+xml">
</head>
<body>
<div class="container zinnia-page">
<header>
<div class="zinnia-logo text-center">
<h1><a href="index.html"><img src="https://contents.ogatism.net/ogatismlogoB1.png" alt="" width="800" height="320" class="blog-header"></a></h1>
</div>
<div class="zinnia-menu text-center">
<nav class="navbar">
<div class="navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="/categories/fortune/">オガティの星占い</a></li>
<li><a href="/about/">オガティとは</a></li>
<li><a href="/post/swiss/swiss_index/">Swiss Ephemeris</a></li>
<li><a href="/biz/">依頼・問い合わせ</a></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="zinnia-main-content">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<article class="single-blog-post">
<div class="post-header text-center">
<div class="single-tag">
<a href="/categories/diary/">雑記</a>
</div>
<h2 class="post-title">
<a href="/post/css-nth-child">【CSS注意点】別タグでもカウントされるnth-childの罠</a>
</h2>
</div>
<div class="post-thumb">
<a href="/post/css-nth-child"> <img src="https://contents.ogatism.net/ogatismlogoC1.png" alt=""></a>
<div class="post-overlay-meta">
<ul class="post-meta pull-left">
<li class="date">2016/03/25</li>
</ul>
</div>
</div>
<div class="post-content">
cssでよく使われるnth-childというセレクタがあります。
要素の何番目かを表す値で、２番目の色はこれ、３番目の色はこれと指定できます。
2n+1とか数学みたいな式を書くことで一つ飛びとかも実現できます。
が、これ罠があって。
別のタグでもカウントされてしまうのですよ。
<span id="more"></span>
例えばこんなタグがあります。
<pre>
<div>
<span>0<span>
<a href="1.html">1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>
</div>
</pre>
これにこんなスタイルをあてます。
<pre>
div a:nth-child(1) {
color: red;
}
div a:nth-child(2) {
color: orange;
}
div a:nth-child(3) {
color: green;
}
</pre>
<h3>結果</h3>
すると結果は、aに対するnth-childを指定しているのにもかかわらず1.htmlのaタグがオレンジに、2.htmlのaタグが緑色に、3.htmlのaタグはスタイルが反映されないという結果になります。
spanタグが邪魔しているのです。
<p data-height="265" data-theme-id="0" data-slug-hash="dqYRQb" data-default-tab="css,result" data-user="ogaty" data-pen-title="dqYRQb" class="codepen">See the Pen <a target="_blank" rel="noopener" href="https://codepen.io/ogaty/pen/dqYRQb/">dqYRQb</a> by yuji ogata (<a target="_blank" rel="noopener" href="https://codepen.io/ogaty">@ogaty</a>) on <a target="_blank" rel="noopener" href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
つまり、
aタグで絞り込んだ2番目の色じゃなくて、
2番目のタグがaだったら色をつける、という動作なのですね。
nth-child(2)→aという判定っぽい。
<h3>そういう仕様なのだから仕方ない</h3>
嫌らしいけどedgeでもchromeでもfirefoxでもこうやってレンダリングされるので仕様なのでしょうね。
ただこれ、div-p-a-/p-/divという感じで囲むと問題なし。子タグがカウントされるのですね。
そういうわけでnth-childを使う場合はul/liやtr/tdなど子供が決まっているものにしましょうね。
じゃないと予期せぬバグを生みますので。
しっかしcssというものは色々分かりづらい仕様ですよね。
どうにかならんものか。
</div>
<div class="single-post-meta ">
<div class="single-tag ">
</div>
</div>
</article>
</div>
</div>
</div>
<hr>
</div>
<footer class="zinnia-footer">
<div class="container">
<div class="footer-social">
<div class="footer-logo text-center">
オガティ（緒形雄二）
</div>
<div class="footer-social-link">
</div>
</div>
</div>
<div class="container footer-copyright-text text-center">
<p>
© 2012-2025 ogatism/Yuji Ogata<br>
© 2017 Zinnia - Designed & Developed by <a href="">ShapedTheme</a>
</p>
</div>
</footer>
<!-- After footer scripts -->
</body>
</html>