Q&A
質問テンプレート文言が残りすぎていて何がご自身の文章なのか判別が難しいです。
”””質問を編集して””” 調整してください。
また、自分で書いたコードでないのでしたら出典を明示してください
（自分で書いたコードなのに他人に説明させるっておかしいですよね？）
css
1コード.tabs-menu li { 2 float: left; 3 margin-right: 8px; 4 margin-bottom: -1px; 5 border-style: solid; 6 border-width: 1px; 7 border-color: transparent; 8 border-radius: 4px 4px 0 0;
出典https://techacademy.jp/my/frontend/frontend2/jquery#chapter-9-2
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
これは子孫セレクタなのでしょうか。
.がついているので分からなくて。。
エラーメッセージ
該当のソースコード
css
1ソースコード 2```.tabs-menu li { 3 4### 試したこと 5 6ここに問題に対して試したことを記載してください。 7 8### 補足情報（FW/ツールのバージョンなど） 9 10ここにより詳細な情報を記載してください。
伝わってなかったか。
「
項目名を除いた質問テンプレート文言を削除して自身の文章だけにしてください
でないとノイズだらけで要件汲み取りに支障が出ます
」
ログイン必須のURLを提示されても確認できません。
しかもテックアカデミーか・・・。下記のような騒動もありましたし、あまりおすすめできないですね。
https://www.haya-programming.com/entry/2019/03/22/092150
そんな事件があったんですね
もともとテックアカデミーと侍は記事の質などで疑問視されているところはあったりして、
私はある時期から意図的に避けるようになりました。回答でもある時期からそれらへのリンクは貼ってません。
ただ、有料コースにしてはセレクタの概念教えてないとしたらカリキュラムに問題ありすぎます（受講者の学習要綱は良く知らないですが）
回答2件
0
内容的にはひとつ前の質問と同じことを聞きたいのでしょうか？
.tabs-menu liの指定はどこに対して適用されるか（子孫て何？）てことですよね、きっと。
以下はざっくりとした説明なのでなんとなくで読んでください。
HTMLは入子状に構成されているのは理解されているとして、簡単に言えば「Aの中のB」が子孫です。
Aを親、Bを子とも言います。
html
1<div> 2 <div>中に入ってるよ</div> 3</div>
外側のdivが親（A）、内側のdivが子（B）です。
もしかしたらBの中にさらにCがあるかもしれませんが、それも子孫です。
divの中のdivにスタイルを指定したい場合以下のように書きます。
スペースで区切ることで、〇〇の中（子孫）の□□という意味になります。
css
1div div{ 2/* ここに何か指定 */ 3}
でもこのままだとHTML中のdivに囲まれたdivすべてにスタイルが効いてしまいます。
そこで、他のものと区別したいときにidやclassが使われます。
divに付いているidとclassの意味と使い方
HTML側でidを指定したら#id名
classを指定したら.class名をCSSで記載します。
html
1<div class="classA">これはclassAというクラスを持ったdiv</div>
CSSでこのdivを示すときは.classAと書きます。
html
1<div class="classB"> 2 <div>これは「classBというクラスを持ったdiv」の中の「classもidも持っていないdiv」</div> 3</div>
CSSでこの「classもidも持っていないdiv」の方を指したいときは
.classB divと書きます。
classBというクラスをdiv以外のタグでも使っている場合、
div.classB divと書いた方が親切かもしれません。
というわけで、ひとつ前の質問にもついでに答えてしまうと
.tabs-menu liが示すのは
<ul class="tabs-menu">の中の<li>だし、
.tabs-menu aが示すのは
<ul class="tabs-menu">の中の<a>です。
HTMLとCSSの基礎の部分になってきますので、わからない箇所をわからないままにせず調べたりしてみてください。
質問者さんがどのような学習をして、どのくらい理解されてるかが回答者にはわかりません。
質問するときのヒントも参考に自分の状況を説明できるようになりましょう。
投稿2019/09/06 06:47
総合スコア3235
0
これは子孫セレクタなのでしょうか。
そうです。
子孫結合子を利用したセレクターは子孫セレクターと呼ばれます。
子孫結合子 - CSS: カスケーディングスタイルシート | MDN
追記
大雑把に言うと、CSS3では、セレクタは【単純セレクタ】【結合子】【単純セレクタ】【結合子】……の繰り返しで表現されています。
A selector is a chain of one or more sequences of simple selectors separated by combinators.
.tabs-menu li
の場合、
【.tabs-menu】【 】【li】ということです。
【.tabs-menu】は単純セレクタのうちのクラスセレクタ、
【 】は子孫結合子、
【li】はタイプセレクタ、
とそれぞれ分解できます。
「子孫セレクタ」という用語はCSS3ではなくなっている（と思う）のですが、CSS2からの歴史的な背景があり、子孫結合子が使われたセレクタを、「子孫セレクタ」と呼ぶことが多いです。
なので、
「【.tabs-menu】【 】【li】は子孫セレクタですか？」と聞かれると、「まあ、そうですね」という回答になります。
参考になりますでしょうか？
投稿2019/09/06 05:19
編集2019/09/06 07:45
総合スコア36930
.がついているのはなぜでしょうか。
.はクラスセレクターです。
要は「.tabs-menu li」が意味しているのは、class="tabs-menu"である要素の配下にある、li要素を指定しています。
https://developer.mozilla.org/ja/docs/Web/CSS/Class_selectors
idとclassについて学んでください。
https://saruwakakun.com/html-css/basic/css#section4
「css ドット」と検索するだけでも情報は大量に出てきます。
調べてもわからなかったのであれば「こんなふうに調べてこのような情報を得たが、この部分が理解できなかった」と質問に明記しましょう。
何のためにテックアカデミー入ったんでしょうか。。
大雑把に言うと、CSS3では、セレクタは【単純セレクタ】【結合子】【単純セレクタ】【結合子】……の繰り返しで表現されています。
> A selector is a chain of one or more sequences of simple selectors separated by combinators.
https://drafts.csswg.org/selectors-3/#selector-syntax
.tabs-menu li
の場合、
【.tabs-menu】【 】【li】ということです。
「子孫セレクタ」という用語はCSS3ではなくなっている（と思う）のですが、CSS2からの歴史的な背景があり、子孫結合子が使われたセレクタを、「子孫セレクタ」と呼ぶことが多いです。
なので、
【.tabs-menu】は単純セレクタのうちのクラスセレクタ、
【 】は子孫結合子、
【li】はタイプセレクタ、
とそれぞれ分解できますが、
「【.tabs-menu】【 】【li】は子孫セレクタですか？」と聞かれると、「まあ、そうですね」という回答になります。
参考になりますでしょうか？
追記した方がよさそうだと思ったので、上記コメントを回答に追記しました。
あなたの回答
tips
プレビュー
