クリエイター：コーディング備忘録ブログ

RSS

コーディング

便利なcssのセレクタ指定方法

2018.01.22

今回は便利なcssのセレクタ指定方法を紹介します

#example>* {
 margin: 0 10px;
}

1

2

3

#example>* {

margin: 0 10px;

}

親に内包れる直下要素のみを対象に指定できます。
親要素であるexampleの直下の要素すべてにマージンが設定されます。

div[id^="sapmple"] { /* 属性 ^=" 文言"]で、【属性】が【文言】で始まる要素 */
 color: green;
}

p[class$="Txt"] { /*  属性$=" 文言"]で、【属性】が【文言】で終わる要素 */
 margin: 10px;
}

div[id*="Box"] { /* 属性*="文言 "]で、【属性】に【文言】を含む要素 */
 padding: 5px;
}

1

2

3

4

5

6

7

8

9

10

11

div[id^="sapmple"] { /* 属性 ^=" 文言"]で、【属性】が【文言】で始まる要素 */

color: green;

}

p[class$="Txt"] { /* 属性$=" 文言"]で、【属性】が【文言】で終わる要素 */

margin: 10px;

}

div[id*="Box"] { /* 属性*="文言 "]で、【属性】に【文言】を含む要素 */

padding: 5px;

}

#sapmpleTxtBoxとセレクタ名を指定していたなら、上記の前方一致と後方一致、部分一致にあてはまります。

この記事を見た人は次の記事も見ています。

CSS3で色を指定する

前の記事

スマホの横揺れ

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

デザイン参考

2017.03.30

コーディング

FTPアクセス制限設定

2016.12.16

コーディング

.htaccessを使用したリダイレクト設定

2016.06.27

コーディング

第三十七回「外れてしまったDWのテンプレート紐づけを元に戻す」

2016.06.14

コーディング

要素が見えたタイミングでイベントを開始させる

2018.11.06

コーディング

知識がなくても簡単にレスポンシブWEBサイトが作れる

2017.10.18