質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1657閲覧

CSSやjQueryにおける「 > 」セレクタの有用性について

mastar_3104

総合スコア38

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2017/06/06 05:02

編集2017/06/06 05:41

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の要素が煩雑になるのでクラスは最低限がいい、とか、、)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

特定のセレクタからの相対位置ですから、必要な場合もあるでしょう
とくに「>」については、直下の子要素なので孫以降を排除するのには有効です

投稿2017/06/06 05:16

yambejp

総合スコア114574

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mastar_3104

2017/06/06 05:36

ご回答ありがとうございます! 「孫以降を排除する」というのは、たとえば子要素と孫以降の要素に同じクラス名を付与しており、子要素にしか当てたくない場合、などでしょうか? 確かに子と孫に共通のスタイルを当てたいので同じクラスを使うことがあるかもしれませんが、頻繁に発生することはないですよね?(そもそも子と孫でクラスを分けて、同じスタイルを当てたいならmixinなどで対応するほうが良い気もしますし。。)
guest

0

大規模なサイトや複雑な構成のサイトになると、「>」で直接指定しないと階層が被る事があるので使用します。
本当は「>」を使用しなくても良いように親となる要素にクラスなりIDなりを割り当てて、その子孫を示す方が正しい使い方だと思います。(第三者が見てもわかり易い)

IDは固有、classは複数存在する物なので何が正しいなどは無いと思いますが、
例えばJqueryから要素を指定する際はID指定が早いのでnth-childなどを使用するよりもIDを振ってあげた方が良い場合はあります。

投稿2017/06/06 05:28

編集2017/06/06 05:47
shaak

総合スコア607

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mastar_3104

2017/06/06 05:39

ご回答ありがとうございます! >本当は「>」を使用しなくても良いように親となる要素にクラスなりIDなりを割り当てて、その子孫を示す方が正しい使い方だと思います。(第三者が見てもわかり易い) なるほど、本来使わないべきだが、>指定なしだと他箇所に影響が出てしまう際の暫定対処という認識ですかね。参考になります。 >例えばJqueryから要素を指定する際はID指定が早い 確かにjQueryの場合はセレクタの指定による速度の差が顕著だと聞いたことがあります。cssの場合はセレクタによる画面描画の速度差なんかはないものなんでしょうか。
guest

0

ベストアンサー

構造に意味を持たせる

次のHTMLを製作者スタイルシートなしの状態で描画したとします。

HTML

1<ul> 2 <li>1-1</li> 3 <li>1-2</li> 4 <li> 5 <ul> 6 <li>2-1</li> 7 <li>2-2</li> 8 </ul> 9 </li> 10</ul>

Google Chrome 59.0.3071.86 は ul > li のリストマーカーを黒で表現し、ul > li > ul > li のリストマーカーを白で表現します。
子要素と孫要素で表現を変える事で構造に意味を持たせています

class属性を適用する

先述のHTMLは下記のようにclass属性を適用しても実現できます。

HTML

1<ul class="grandparents"> 2 <li class="child">1-1</li> 3 <li class="child">1-2</li> 4 <li class="child"> 5 <ul class="parent"> 6 <li class="grandchild">2-1</li> 7 <li class="grandchild">2-2</li> 8 </ul> 9 </li> 10</ul>

しかし、子と孫を区別する構造になっている事が明らかであるならば、class属性を付与させるHTMLは冗長ともいえます。

親にid/class属性を付与する

ul要素の場合、子に存在するli要素とはセットで構造化する為、孫要素を区別したい場合があります。
仮に先述のHTMLで子/孫関係に重要な意味がない場合には次のように書けます。

HTML

1<ul class="foo"> 2 <li>1-1</li> 3 <li>1-2</li> 4 <li> 5 <ul class="bar"> 6 <li>2-1</li> 7 <li>2-2</li> 8 </ul> 9 </li> 10</ul>

親にid/class属性が割り当てられてあれば、li要素にid/class属性を割り当てる必要はありません(フラグメント識別子としての役割は除く)。

CSS

1ul.foo > li { 2 color: blue; 3} 4 5ul.bar > li { 6 color: green; 7}

結論

採取的には、子/孫要素に論理構造的な意味を感じ取れるか否かが判断の分かれ目だと思います。
「全ての要素に名前を付ければよい」も一つの考え方ではありますが、全ての要素の名前を考える労力が少なからずあります。

Re: mastar_3104 さん

投稿2017/06/06 06:02

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mastar_3104

2017/06/06 07:50

ご回答ありがとうございます! 構造が意味を持っているかどうか、という考え方ですか。大変参考になりますし、一番しっくりきます。 HTMLコーディングを行った担当者がまず構造の意味を考えて設計しているか否かがcssに現れてくるのですね。 ご回答頂いたような考え方はHTML設計?CSS設計?みたいな呼び名があるんでしょうか。(プログラムでいうオブジェクト指向、みたいなのに近い気がして、なにか名称なんかがあれば調べたり勉強しやすいと思ったのですが)
think49

2017/06/06 10:17

> ご回答頂いたような考え方はHTML設計?CSS設計?みたいな呼び名があるんでしょうか。 私は知りません。HTMLを動かして遊んでいる際に自然と覚えた意識で特に名前があるとは考えたこともなかったですね。 私自身はテクニックの名前に頓着しない方であり、プログラミングでも名前はどうでもよくて「コード」と「仕組み」が合致すれば問題ないと考えています。 他人への説明もコードでやる方が齟齬がなく、確実だと思っています。
mastar_3104

2017/06/06 13:17

なるほど、確かにその通りだと思います。 大変参考になりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問