CSSのセレクタが複数重なる（.overlay_drawermenu.active）ものを見ました。

Question

下記のように、CSSのセレクタが複数重なる（.overlay_drawermenu.active）ものを見たのですが、これは、半角スペースがないので子孫セレクタでもなさそうですし、いったいどういう意味になるのでしょうか？

.overlay_drawermenu.active span:nth-of-type(1) {
-webkit-transform: translateY(20px) rotate(-315deg);
transform: translateY(20px) rotate(-315deg);
}

Answer 1

さんぷる。
以下の例では、てすと３ (test1 と test2 が両方指定されている) のみ文字サイズが大きくなります。

<style type="text/css">
  .test1 { background:yellow; }

  .test2 { color:red; }

  .test1.test2 { font-size:200%; }
</style>  

<div class="test1">てすと１</div>
<div class="test2">てすと２</div>
<div class="test1 test2">てすと３</div>

Comments

[退会済みユーザー]

ありがとうございます。

つまり、下記は
クラスoverlay_drawermenuとクラスactive両方のクラスがついている要素中のspanタグの一つ目だけにこのCSSを適応するということでしょうか？
.overlay_drawermenu.active span:nth-of-type(1)

半スペをなくすと子孫セレクタではなく、クラスoverlay_drawermenuとクラスactive両方のクラスがついている要素という指定の仕方ということですね。

Answer 2

セレクタを連続して書くと、「両方のセレクタが適用される」、つまりこの場合は「両方のクラスが付いている」という意味になります。

tag.classやinput[type="text"]、a:visitedのように、複数一致のセレクタを使う場面は良くあります。

Comments

[退会済みユーザー]

ありがとうございます。

つまり、下記は
クラスoverlay_drawermenuとクラスactive両方のクラスがついている要素中のspanタグの一つ目だけにこのCSSを適応するということでしょうか？
.overlay_drawermenu.active span:nth-of-type(1)

半スペをなくすと子孫セレクタではなく、クラスoverlay_drawermenuとクラスactive両方のクラスがついている要素という指定の仕方ということですね。