CSSやjQueryのセレクタの記述方法で、直近の要素のみを選択する「>」の使い道、またそもそも要素を立て続けに指定する方法の有用性がわからず質問させていただきました。
たとえば以下のようなHTMLがあった場合
HTML
1<dl class="list"> 2 <dd> 3 <ul> 4 <li> 5 <dl> 6 <dt>TEST1</dt> 7 </dl> 8 </li> 9 <li> 10 <dl> 11 <dt>TEST2</dt> 12 </dl> 13 </li> 14 </ul> 15 </dd> 16</dl>
cssやjQueryで以下のようなセレクタの指定をたまに目にします。
css
1.list > dd > ul > li > dl > dt { 2 font-size : 14px; 3}
JavaScript
1$('.list > dd > ul > li > dl > dt').text('TEST3');
上記のような指定は、仮に.listとddの間を別のタグで囲む必要が出来た場合に、すべてのセレクタを各直さなければならなくなります。
であればそもそも直近のみ指定する「>」を使用せず、以下のように、対象にクラスをふったほうが汎用性が高いと思います。
HTML
1<dl class="list"> 2 <dd> 3 <ul> 4 <li> 5 <dl> 6 <dt class="list-block">TEST1</dt> 7 </dl> 8 </li> 9 <li> 10 <dl> 11 <dt class="list-block">TEST2</dt> 12 </dl> 13 </li> 14 </ul> 15 </dd> 16</dl>
css
1.list .list-block { 2 font-size : 14px; 3}
JavaScript
1$('.list .list-block').text('TEST3');
そう考えると、そもそも「>」の使い道が良くわかりません。
自分の不勉強かと存じますが、なにか有用な点は存在するのでしょうか。
また、少し漠然としていますが、cssで指定する際に「良い要素の指定方法」なぞございましたらご教示いただきたいです。(基本的にcssで指定するものは全てクラスをふったほうがいい、とか、HTMLの要素が煩雑になるのでクラスは最低限がいい、とか、、)
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/06 05:36