CSS

CSSの主なセレクタの使い方

投稿日:

CSSではスタイルを適応する対象を示す部分を「セレクタ」と呼び、さまざま種類のセレクタがあります。

主なセレクタ

CSSで利用できる主なセレクタは以下のものです。

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

全称セレクタは「*」をセレクターにするもので、すべての要素に指定したスタイルを適用します。

上記はcolor属性をもつすべての要素の文字が赤になります。

要素セレクタ

要素セレクタはHTMLの要素ごとにスタイルを適用します。

上記はh1タグの文字が赤になります。

idセレクタ

idセレクタはHTMLの要素に指定されたidでスタイルを適用します。

idセレクタはセレクタ名に「#」をつけて管理します。

上記はid「myid」で指定されたタグの文字が赤になります。

注意

idセレクタは1ページ内に同じIDを複数使用することはできません。

classセレクタ

classセレクタはHTMLの要素に指定されたclassごとにスタイルを適用します。

classセレクタはセレクタ名に「.」をつけて管理します。

上記はclass「myclass」で指定されたタグの文字が赤になります。

注意

classセレクタは1ページ内に同じclassを複数使用することができます。

複数のセレクタを同時に指定する方法

同じプロパティを持つセレクタを同時に指定することで、変更時の影響度を下げることができます。

上記の例ではh1タグ、h2タグ、h3タグの文字色が赤になります。

子孫セレクタ

最初に指定されたセレクタ内のセレクタにスタイルが適応されます。

上記の例では「myclass」セレクタ内にある「p」タグのみ(ここでは「bbb」)の文字色が赤になります。

子セレクタ

子セレクタは親から見て子にあたる(1階層下)のタグのみにスタイルが反映されます。
(2階層以下には反映されません。)

上記の例では「myclass」セレクタ内にある「p」タグのみ(ここでは「bbb」)の文字色が赤になります。
(「CCC」は文字色が赤になりません。)

以上、CSSの主なセレクタの使い方でした。

当サイトのおすすめ記事

パソコン 1

初心者でも失敗しないレンタルサーバーの選び方ですが、最近ではブログを立ち上げて、そこから広告収入を得る「アフィリエイト」が随分一般的になりました。 私の周りでも実際にやっている人が多くいます。 アフィ ...

プログラミング 2

SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見ました。 SQLでIFを使わずに条件 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでは「ユーザー定義型」と呼ばれる独自のテーブル型をした戻り値を返す関数を作成することができます。 その作り方と使い方を解説します。 SQLServerでテーブル型を戻り値とする関数を ...

5

アフィリエイトでいきなり成果を出すのは難しいです。 でも、成果がないとレンタルサーバー代やドメイン代がペイできません。 しかも長い間、結果がでないとやる気もなくなってしまいます。 そういったことを防ぐ ...

-CSS

Copyright© ソフトウェア開発日記 , 2018 All Rights Reserved.