子供セレクタの記述方法と使い方【CSSスタイルシート】

子供セレクタ

親要素 > 子要素{宣言}
(親要素に含まれる直接の子要素が対象)


子供セレクタは、親要素の中に含まれる直接の子要素にスタイルを適応したいときに使います。


親要素の後に半角スペース。そのあとに「>」半角の大なりカッコ。そのあとに半角スペース。そのあとに子要素を記述します。


(例)
<div>
<a>内容1</a>
<p>内容2<a>内容3</a></p>
</div>

例えば上のようなHTMLが組まれていた時、div要素内のaを対象にしたいときは、子孫セレクタを使いますので、「div a{宣言}」のような記述になります。この場合対象になるのは「内容1」と「内容3」です。今回紹介している子供セレクタは親要素の直接の子要素が対象になりますので、例えば内容1だけを対象にしたい場合は「div > a{宣言}」という形になります。

内容3だけを指定したい場合は「p > a{宣言}」となります。





カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。