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

RSS

コーディング

属性セレクタでCSSを適用させる

2017.03.28

■ポイント
・タグに直書きされている属性でセレクタを選択できる。
・いじれれない部分にCSSを適用させる際に便利

<div width="640" height="200">　　
   <p>デモ</p>
</div>

1

2

3

<div width="640" height="200">　　

<p>デモ</p>

</div>

<style>

div[width="640"]{   <!--属性width="640"のあるセレクタを指定できる -->
	width:100%;
	height:400px;
	background:#C93;
}
div[width="640"] p{　<!--通常とおなじように子孫セレクタや他の指定方法と組み合わせもできる -->
	text-align:center;
}

</style>

1

2

3

4

5

6

7

8

9

10

11

12

<style>

div[width="640"]{

width:100%;

height:400px;

background:#C93;

}

div[width="640"] p{

text-align:center;

}

</style>

参考：意外と知らない!?CSSセレクタ20個のおさらい

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

WP:カスタムタクソノミーごとの投稿とタームの一覧表示

前の記事

【-webkit-background-clip】文字にグラデーションをかける【ie非対応】

次の記事

コメント

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

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

最近の投稿

アーカイブ

RELATED

コーディング

Browser CSS-Selector-Test

2017.12.07

コーディング

noindex

2018.09.28

コーディング

HTML,CSSがブラウザのどのバージョンに対応しているか確認するWEBサービス

2017.03.31

コーディング

IE 8 にlast-childを適用させる

2017.03.31

コーディング

WP:任意のページ名で投稿一覧を作成

2017.03.23

コーディング

wordpressでのコンタクトフォーム作成「Contact Form7」

2016.07.08