ホームページ制作の兵法

読者です 読者をやめる 読者になる 読者になる

ホームページ制作の兵法

マークアップエンジニアによるHTML,CSSなどサイト制作の基礎知識

CSSセレクタを極めて、自在に要素を選べるようにするWEBサイト制作の技術

CSSセレクタを極めて、自在に要素を選べるようにするWEBサイト制作の技術を学ぼうと思います。

なぜCSSセレクタを知りたいのか?

その理由は、鳥が空から水中の魚を狙うように、要素を的確に指定したいからです。

 

スタイルシートの設定

h1に対して色を赤にしたい場合は下記のように記述します。

h1 { color : red }

 このとき、h1をセレクタ、colorをプロパティ名、redを値、と呼びます。

 

セレクタの種類

・シンプル>セレクタ

・疑似要素

・結合子

・グループ

 

結合子

結合子を利用してドキュメントの構造で要素を指定します。

1.子孫>セレクタ・・・ A B:A要素の階層下すべてのB要素を指定

2.子セレクタ・・・ A > B:A要素の1回層下のB要素を指定

3.隣接セレクタ・・・A + B:A要素の直後に記述した同階層のB要素を指定

4.間接セレクタ・・・A~B:A要素の後に記述した全ての同階層のB要素

 

例)

<body>
<div>
<h1>セレクタの種類</h1>
<h2>(分類)結合子</h2>
<h3>1.子孫セレクタ</h3>
<p>A B:A要素の階層下すべてのB要素を指定</p>
<h3>2.子セレクタ</h3>
<p>A > B:A要素の1回層下のB要素を指定</p>
<h3>3.隣接セレクタ</h3>
<p>A + B:A要素の直後に記述した同階層のB要素を指定</p>
<h3>4.間接セレクタ</h3>
<p>A~B:A要素の後に記述した全ての同階層のB要素</p>
<h2>(分類)シンプルセレクタ</h2>
<h3>1.構造疑似クラス</h3>
<ul>
<li>:nth-child</li>
<li>:nth-of-type</li>
</ul>
</div>
</body>

-------------------------------------------------------------- 

⬇ ブラウザでは、下記のように表示されます

f:id:site100:20170422111528p:plain

-------------------------------------------------------------- 

ここで問題です。 

問1、「(分類)シンプルセレクタ」の文字を赤くしたい場合、y に入れる数字はいくつでしょうか?

div h2:nth-child( y ) {color: red;}

 

問2.セレクタを下記のように記述するとどうなりますか?

   プロパティと値は {color: red;} で固定します。

1.div h2 {color: red;}

2.div h2:first-child {color: red;}

3.div h2:nth-child(2) {color: red;}

4.div :nth-child(2) {color: red;}

5.div h2 ul :first-child {color: red;}

6.div ul :first-child {color: red;}

7.div > :first-child {color: red;}

8.ul:first-child {color: red;}

9.ul :first-child {color: red;}

10.h2:first-child {color: red;}

11.h2:nth-child(2) {color: red;}

 

クロムの検証モードで試してみよう!

セレクタの種類ついて

Chromeで「セレクタの種類ついて」を開き、画面を右クリック→検証

 

 

f:id:site100:20170422125146p:plain

2項目チェックで指定した要素が変化しないときに対応しよう!

1.どの箱の、何番目の子(孫)要素、を指定したいのか?

2.セレクターの指定が、どの箱の、どんな種類の、何番目の要素、を指定しているのか?

 

まとめ

セレクタCSSで装飾する要素を指定する

セレクタの種類を知る

セレクタの使い方を知る

・指定した要素が変化しないときは、検証して必ず原因を突き止めること。

今回、h2:first-childは効きません。それはdivの初めの子要素がh1だからです。

div > h2:fist-child,div :nth-of-type(2),div h2:first-of-typeなど、狙った要素は何パターンの指定方法があるのか考えてみてください。

要素を狙ったのに変化しなかった時、諦めないでください。必ず理由があります。