セレクターの種類
セレクターの種類
「セレクターの種類」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全1レッスンが含まれています。
概要
こんにちは。
このレッスンでは、より複雑なセレクターを使ってCSSの知識をさらに深めます。
複数のスタイル定義
各スタイルの間にセミコロンを置くことで、複数のスタイルを定義できます。
.first{
color:blue;
font-size:20px;
text-align: center;
}より複雑なHTMLドキュメント
これまでは、単純なタグ、id、クラスセレクターを扱ってきました。しかし、ユーザーインターフェースが複雑になると、より複雑なセレクターが必要になる場合があります。
以下の例では、より複雑なHTMLドキュメントを扱います。
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>例を分析する
それでは、コードを分析してみましょう。
- ページのbody内にコンテナーとして機能するmy-areaというidを持つdivがあります。このdivは、その内部にあるすべての要素の祖先です。
- firstクラスを持つp要素は、secondクラスを持つdiv要素の兄弟要素です。
- 3番目の要素は2番目の要素の子要素であり、my-area要素は3番目の要素の祖先とみなせます。
警告
HTMLのレイアウトは、文字どおり家系図のようなものだと考えることができます。
祖父から遺伝的に受け継ぐことがあります。
しかし、この遺伝が父親の代で変化すると、父親の遺伝子のほうが強く現れ、祖父から受け継いだ特徴も変化します。
セレクターの組み合わせ
それでは、セレクターを組み合わせる方法を見てみましょう。
次の記述は、2番目のクラスを持つ要素が、3番目のクラスを持つ要素の子孫（子または孫）であることを示します。
2つのクラスの間にスペースがある場合、左側のクラスが子孫を探すことを意味します。
.second .third{
color:red;
}子セレクター
以下の例では、
2番目のクラスの子要素である3番目のクラスを選択することを意味します。
大なり記号は、対象要素の子要素を選択することを意味します。
.second > .third{
color:red;
}タグセレクターとクラスセレクターを組み合わせて要素を選択できます。
同時に、タグセレクターとクラスセレクターを組み合わせて要素を選択することもできます。
以下の例では、thirdクラスを持つp要素が選択されます。
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>firstクラスを持つdivを選択するとします。
firstクラスを持つdivを選択するとします。
以下の例は、my-areaというidを持つdiv要素の子要素である、firstクラスを持つ要素を選択することを意味します。
これにより、選択対象の要素の詳細度が高くなります。
div#my-area > .first{
color:red;
}すべてを選択する
アスタリスク記号（*）は、セレクターの中で重要な役割を持ちます。
これは、すべてを選択することを意味します。
以下の例では、my-areaというidを持つ要素のすべての子孫を選択することを示しています。
ここで注意すべき点は、子要素だけでなく、すべての子孫要素が対象になることです。
子要素だけを選択したい場合は、アスタリスクの前に大なり記号を置く必要があります。
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}隣接兄弟セレクター
これまでに子孫セレクターと子セレクターを使用しました。次は兄弟セレクターについて学びましょう。
兄弟セレクターでは、+記号を使って次の兄弟要素を選択します。
この例では、セレクターによって3番目の段落要素の背景色が黄色になります。
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>一般兄弟セレクター
次に続く最初の兄弟要素だけでなく、その後に続くすべての兄弟要素を選択したい場合は、チルダ記号（~）を使用します。
チルダ記号は、後続兄弟結合子とも呼ばれます。
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
疑似クラスとCSSクラス
クラスではないものの、クラスのように動作する表現を疑似クラスと呼びます。
HTMLでは、どの要素にも疑似クラスを定義しません。
ブラウザーがコードを解釈すると、疑似クラスが存在するものとして扱います。そのため、CSSセレクターで疑似クラスを使用できます。
:hover疑似クラス
疑似クラスの中でも、:hoverは間違いなく最もよく知られています。
ホバー（:hover）は、マウスが要素の上に移動したときに、ブラウザーによって対象要素に自動的に適用される疑似クラスです。
疑似クラスは、セレクターの記述でコロン（:）記号の後に指定します。
疑似クラスの使用方法を、以下の構文で示します。
selector:pseudo-class {
property: value;
}:hoverでリンクをスタイリングする
それではリンクを作成し、ホバーしたときにどのように表示されるかを見てみましょう。
警告：モバイルデバイスにはWebのようなホバーイベントがないため、この効果はCoddykitのモバイルアプリケーションでは表示されません。
以下の例では、マウスでリンクにホバーすると、リンクの色が緑に変わることを確認します。
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>:first-child疑似クラス
最も混乱しやすい疑似クラスの1つが:first-childです。
通常、名前から判断すると、要素の最初の子要素を選択するものだと考えます。
しかし、この推測は正しくありません。
要素の兄弟要素の中から、最初の要素を選択するために使用します。
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>:last-child疑似クラス
last-childは、first-child疑似クラスの反対です。要素の兄弟要素の中から、最後の要素を選択するために使用します。
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>::before疑似要素
要素の前に何かを追加したい場合は、::before疑似セレクターを使用します。
以下の例では、header要素の前に「Hello」というコンテンツを追加しています。
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>::after疑似要素
::before疑似要素の反対である::after疑似要素は、要素の後に新しいコンテンツを追加するために使用します。
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>リストのPseudo Class
最もよく使われるpseudo-classについて学びました。しかし、ほかにも数十種類あります。
以下のリンクから、すべてのpseudo-classの一覧を確認できます。必要に応じて、どれでも使用できます。
おめでとうございます
おめでとうございます 🎉
このセクションでは、Selectorの種類を学びました。
次のセクションでは、最もよく使われるCSSプロパティについて学びます。
よくある質問
「セレクターの種類」レッスンは無料ですか？
はい。「セレクターの種類」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全1レッスンが含まれています。
「セレクターの種類」で何を学びますか？
セレクターの種類 ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「セレクターの種類」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。