実務で役立つ！CSSのセレクタの種類と使い方【初心者向け】

CSSで書くセレクタの使い方について解説しています。

セレクタを使うことで作業効率も上がるので、すぐ覚えるのは難しいかもしれませんが、書いていくうちに慣れてくるはずです。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

 

セレクタとは

セレクタとは、CSSのスタイルを指定する対象のことです。

HTMLタグであったり、クラス名やid名だったりと、用途に応じてセレクタは使い分ける必要があります。

 

セレクタの種類

セレクタの種類はたくさんあります。よく使うセレクタをセレクタのジャンルごとに紹介していきます。

全称セレクタ

・「*」

対象：すべての要素

使い方の例：

* { color: rgb(255, 0, 0); }

 

要素型セレクタ

・要素名

対象：対象の要素

使い方の例：

p { color: rgb(255, 0, 0); }
div { font-size: 12px; }

 

classセレクタ

・要素名.クラス名

対象：対象の要素で対象のクラスがついているもの

使い方の例：

p.red { color: rgb(255, 0, 0); }
p.blue { color: rgb(0, 0, 255); }

 

idセレクタ

・要素名#id名

対象：対象の要素で対象のidがついているもの

使い方の例：

div#red { color: rgb(255, 0, 0); }
div#green { color: rgb(255, 0, 0); }

 

擬似クラス

・要素名:link

対象：対象の要素でまだ閲覧していないリンク

使い方の例：

a:link { color: rgb(255, 0, 0); }

 

・要素名:visited

対象：対象の要素で閲覧済みのリンク

使い方の例：

a:visited { color: rgb(0, 0, 255); }

 

・要素名:hover

対象：対象の要素でマウスカーソルが要素の上にある場合

使い方の例：

a:hover { color: rgb(0, 255, 0); }

 

・要素名:focus

対象：対象の要素でフォーカスされている場合

使い方の例：

input:focus { background: rgb(255, 100, 100); }

 

・要素:first-child

対象：対象の要素内の最初の要素

使い方の例：

div:first-child { color: rgb(255, 0, 0); }

 

・要素:before

対象：対象の要素の直前

使い方の例：

div:before { content: "["; }

 

・要素:after

対象：対象の要素の直後

使い方の例：

div:after { content: "]"; }

 

属性セレクタ

・要素名[属性名]

対象：対象の要素の中で属性名の属性があるもの

使い方の例：

a[target] { color: rgb(255, 0, 0); }

 

・要素名[属性名=”属性値”]

対象：対象の要素の中で属性が属性値と一致するもの

使い方の例：

a[href="http://google.co.jp/"] { color: rgb(0, 0, 255); }

 

複数のセレクタ

・セレクタ1,セレクタ2

対象：複数のセレクタ

使い方の例：

h1, h2, h3, h4, h5, h6 { color: rgb(255, 0, 0); }

 

子孫セレクタ

・親セレクタ 子孫セレクタ

対象：親セレクタの下の階層にある子孫セレクタ

tr td { color: rgb(255, 0, 0); }

 

子セレクタ

・親セレクタ>子セレクタ

対象：対象のセレクタの直下の子セレクタ

div>strong { color: rgb(255, 0, 0); }

 

 

[PR] Webデザインで副業する学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。htmlファイルを作成し、以下を記述します。

css部分
------------------------
div>strong {
  color: rgb(255, 0, 0);
}
table,th,td {
  border: 1px rgb(0,0,0) solid;
}
td.green {
  color: rgb(0, 255, 0);
}
td.blue {
  color: rgb(0, 0, 255);
}
------------------------

html部分
------------------------
<div>
  <strong>太郎</strong>
  <strong>二郎</strong>
  <strong>ジョン</strong>
  <strong>ニキータ</strong>
  <strong>三郎</strong>
</div>
<table id="table">
  <thead>
    <tr>
      <th>名前</th>
      <th>好きな食べ物</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="green">太郎</td>
      <td class="blue">きびだんご</td>
    </tr>
    <tr>
      <td class="green">二郎</td>
      <td class="blue">ラーメン</td>
    </tr>
    <tr>
      <td class="green">ジョン</td>
      <td class="blue">ドーナツ</td>
    </tr>
  </tbody>
</table>
------------------------

ブラウザでアクセスします。

 

まとめ

今回はよく使うセレクタをご紹介しましたが、この他にもセレクタはたくさんあります。実際に使ってみて状況に応じて使い分けられるようになりましょう。

加えて、Webデザイナーがどんな仕事を担当する人なのか、詳しく知りたい方はWebデザイナーとはの記事も合わせてご覧ください。

 

 

また、TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、オリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。