cssでの、いろいろなセレクタの指定の仕方



今日は、いろいろなセレクタの指定の仕方について書きたいと思います。
その前にざっくりとcssの構造について。

cssの基本構造

cssはセレクタプロパティで構成されます。

  • セレクタとは、hやpやdivやtdやthやら、HTMLで指定するタグ部分です。(ざっくり)
    また、classやidなんかもここの要素として指定する事ができます。指定する場合は、例えば
    <p class=”hogehoge”>とclass指定していた場合は.hogehoge{プロパティ:値;}、
    <p id=”hogehoge”>とid指定していた場合には#hogehoge{プロパティ:値;}とします。
  • プロパティとは、セレクタに対してどのような見た目にするかを指定する所です。
  • 値とは、プロパティで指定した見た目をどのくらいのボリューム(量)で適用させるか決める所です。

次からが今回の記事の本題です。
こんなHTMLを基盤にします。

HTML
<h1>TONTON Build</h1>
<p><strong>TONTON Build</strong>はmiiの作ったDIY家具を紹介しているホームページです!</p>
<ul>
<li><a href=”cher.html”>椅子</a></li>
<li><a href=”desk.html”>机</a></li>
<li><a href=”tv_bord.html”>TV台</a></li>
</ul>
表示

さまざまなセレクタの書き方

カンマで区切る

css
h1,p{color:#ff0000;}/*red*/

  • ページ内で指定した全てのh1とpにスタイル(見た目)が適応されます。
表示

半角スペースで区切る

css
ul a{color:#ff0000;}/*red*/

  • ulの中にある全てのaタグに適用されます。
表示

半角スペースで区切る

css
ul a{color:#ff0000;}/*red*/

  • ulの中にある全てのaタグに適用されます。
表示

>で区切って記述

css
p > strong{color:#ff0000;}/*red*/

  • pの一回層下にあるstrongに適用されます。
表示

+で区切って記述

css
h1 + p{color:#ff0000;}/*red*/

  • h1に隣接したpにだけ適用されます。
表示

カンマ区切りと半角スペース区切りはよく使いそうなので覚えておきたいです^^

コメントを残す

メールアドレスが公開されることはありません。