cssセレクタの指定方法 復習

jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。
jQueryやCSS3が上手く動かない理由の多くは実はcssでセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しましょう。

まずはセレクタをしっかりと理解しましょう。

（すべての要素に適用）

アスタリスク（*）ですべての要素にスタイルを適用することができます。

* {
  color:red;
}

この場合、p要素の中にある要素すべてに適用されます。

p * {
  color:red;
}

.〇〇

クラス名を指定した要素にスタイルが適用されます。

<p class="sample">テキストテキスト<p>

.sample {
  font-size:18px;
  color:red;
}

#〇〇

ID名を指定した要素にスタイルが適用されます。

<p id="sample">テキストテキスト<p>

#sample {
  font-size:18px;
  color:red;
}

E F　（子孫要素に適用）

セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。

html

<p><strong>テキスト</strong></p>

p strong {
  font-size:16px;
}

pタグの中にあるstrong要素に適用されます。

E > F　（子要素にのみ適用）

セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

<div class="sample">
  <a href="#">リンク1<a/>
  <ul>
    <li><a href="#">リンク1<a/></li>
  </ul>
<div>

div.sample > a {
  font-size:18px;
  font-weight:bold;
}

クラス名sampleの直下にあるa要素にのみ適用されます。

その他にも

E + F　（隣接している要素に適用）

E ~ F　（後にある要素に適用【CSS3】）

などもあります。

確認問題

下記にある既存のjQueryをそのまま使い、以下の動きになるようにHTML・CSSを完成させなさい

• ボタンを押したら300pxの正方形が1秒かけて右下に200px移動
• 背景色が青から赤になるように
• アニメーションのタイミングファンクションは「linear」に設定
• 変形後、もう1度クリックしたら、初期状態に戻るように設定

• 変形中、ボタンをクリックしても命令を受け付けないように既存のjQueryに記述を追加する

使うjQuery

$(function(){
$('button').on('click', function(){
  $('#box').toggleClass('trans');
});
});