【CSS3学習】セレクタについて

前回のブログ:cssとは・基本の記述方法

セレクタ

全称セレクタ(ユニバーサルセレクタ)　

書式 : ＊
範囲 : 全ての要素
(アスタリスクを記述し、すべての要素に対してスタイルを適用する。)

<h1>Qiita</h1>
<p>cssとは<strong>Cascading Style Sheet</strong>の略。</p>
<p>HTMLに対して<strong>色、大きさ、配置など</strong>を指定してページをデザインするための言語</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>jQuery</li>
  <li>Ruby</li>
  <li>PHP</li>
</ul>

* {
    color: blue;
}

要素型セレクタ

書式 : 　要素名
範囲 : 要素名で指定した要素
(文書内の指定した要素のすべてに対してスタイルを適用する。)

<h1>Qiita</h1>
<p>cssとは<strong>Cascading Style Sheet</strong>の略。</p>
<p>HTMLに対して<strong>色、大きさ、配置など</strong>を指定してページをデザインするための言語</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>jQuery</li>
  <li>Ruby</li>
  <li>PHP</li>
</ul>

p {
    color: red;
}

classセレクタ

書式 : 　.クラス名
範囲 : クラス名をつけた範囲
(class属性によって特定のclass名がつけられた要素を対象にスタイルを適用する。
id属性とは異なり、１つの文書内で同じclass名を複数指定することができるので、複数の箇所や異なる要素に対し同じスタイルを指定できる。)

<h1 class="title">Qiita</h1>
<p>cssとは<strong>Cascading Style Sheet</strong>の略。</p>
<p>HTMLに対して<strong>色、大きさ、配置など</strong>を指定してページをデザインするための言語</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>jQuery</li>
  <li>Ruby</li>
  <li>PHP</li>
</ul>

.title{
    color: lightpink;
}

p.title{
    color: lightpink;
}

idセレクタ

書式 : 　#id名
範囲 : id名をつけた範囲
(id属性によって特定のid名が付けられた要素に対象にスタイルを適用する。
1つの文書内では同じid名を重複して指定することはできない。)

<h1 class="title">Qiita</h1>
<p id="css">cssとは<strong>Cascading Style Sheet</strong>の略。</p>
<p>HTMLに対して<strong>色、大きさ、配置など</strong>を指定してページをデザインするための言語</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>jQuery</li>
  <li>Ruby</li>
  <li>PHP</li>
</ul>

#css{
    color: orange;
}

p#css{
    color: orange;
}

擬似クラス

:link

書式 : 要素名:link
範囲 : 未訪問のリンク
(未訪問のリンクに対してスタイルを適用する。)

a:link {
    color:#1b95e0;
}

:visited

書式 : 要素名:visited
範囲 : 訪問済みのリンク
(訪問済みのリンクに対してスタイルを適用する。)

a:visited {
    color: #e67277;
}

:hover

書式 : 要素名:hover
範囲 : カーソルが乗っている状態
(要素にカーソルなどが乗った際のスタイルを適用する。カーソルは乗っているが、クリックはされていない状態)

li:hover {
    color: #4cbcff;
}

:active

書式 : 要素名:active
範囲 : クリック中
(要素がアクティブになった際のスタイルを適用する。クリックされてから離されるまでの状態)

input:active {
    background: #ff6e9b;
    box-shadow: 2px 2px 1px #c13c8c inset;
}

:focus

書式 : 要素名:focus
範囲 : フォーカスされている要素
(要素がフォーカスされた場合のスタイルを適用する。例えば、フォームの入力欄にカーソルを合わせ、テキスト入力できるようになった状態など)

a:focus {
    background: #31d8e6;
    color: #fff;
}

属性セレクタ

要素名[属性名]

書式 : 要素名[属性名]
範囲 : 特定の属性を持つ指定要素
(特定の属性を持つ、指定した要素を対象にスタイルを適用する。属性値は問わない)

<ul>
  <li><a href="#" title="最新情報">最新情報！</a></li>
  <li><a href="#">お知らせ</a></li>
</ul>

a[title] {
    background: #ffa969;
    color: #fff;
}

要素名[属性名="属性値"]

書式 : 要素名[属性名="属性値"]
範囲 : 特定の属性値を持つ指定要素
(特定の属性に特定の値を持つ、指定した要素を対象にスタイルを適用する)

<input type="text">
<input type="email">    
<input type="submit">

input[type="submit"] {
    background-color: #b2e165;
    border: none;
}

複数のセレクタ

セレクタ , セレクタ

書式 : セレクタ , セレクタ
範囲 : 複数のセレクタ
(セレクタをカンマ(,)で区切ると、複数のセレクタにまとめて同じスタイルを適用できる。)

<h1>Qiita</h1>
<p>text</p>
<a href="#">リンク</a>
<input type="text">
<input type="submit">

h1 , a {
    color: #ff6e9b;
}

子孫セレクタ

セレクタ セレクタ

書式 : セレクタ セレクタ
範囲 : 下の階層の子孫要素
(セレクタを半角スペースで区切ると、ある要素の下の階層にある子孫要素を対象にスタイルを適用できる。)

<p>cssとは<strong>Cascading Style Sheet</strong>の略。</p>

p strong {
    color: #1a78bd;
}

子セレクタ

セレクタ>セレクタ

書式 : セレクタ>セレクタ
範囲 : 直下の階層の子要素
(セレクタを　>　で区切ると、あるセレクタの直下の階層にある子セレクタを対象にスタイルを適用できる。)

<p>cssとは<strong>Cascading Style Sheet</strong>の略。<span>HTMLに対して<strong>色、大きさ、配置など</strong>を指定してページをデザインするための言語</span></p>

p>strong {
    color: #1a78bd;
}

隣接セレクタ

セレクタ+セレクタ

書式 : セレクタ+セレクタ
範囲 : 直後に隣接している要素
(セレクタを + で区切ると、同じ階層にある要素同士で、ある要素の直後に隣接している要素を対象にスタイルを適用できる。)

<h1>Qiita</h1>
<p>cssとは<strong>Cascading Style Sheet</strong>の略。</p>
<p>HTMLに対して<strong>色、大きさ、配置など</strong>を指定してページをデザインするための言語</p>

h1 + p {
    color: #e14561;
}

今回は書いていない、　:nth-childなどの擬似クラスと、:afterなどの擬似要素はまた別の機会に書いていこうと思います。