セレクタ

主なセレクタ

意味 使用例 説明 最初に定義されたCSSの水準
* すべての要素 *.abc class="abc"であるすべての要素 2
E E要素 以下 E や F はh1,h2,p,spanなどの要素のどれかを表す 1
E.warning クラスが"warning"であるEという要素(その文書言語はクラスが決定される方法を明示する)。 p.abc class="abc"であるp要素 1
E#myid IDが"myid"と等しいEという要素。 h2#abc id="abc"であるh2要素 1
E F Eという要素の子孫であるFという要素
<E><F>子</F></E> <E><G>子<F>孫</F></G></E>
div pdiv要素の中にあるp要素。子でも孫でもよい。 1
E > F Eという要素の子であるFという要素
<E><F>子</F></E>
div > pdiv要素の中にあるp要素。孫ではだめ。 2
E + F Eという要素の直後に来るFという要素
<E></E><F>直後</F>
h2 + ph2要素の直後にくるp要素。(その次のp要素は入らない) 2
E ~ F Eという要素の後に来るFという要素
<E></E><G></G><F>後</F>
h3.chu ~ pclass="chu" というクラス属性を持ったh3要素の後にくるp要素すべて。 3
E[foo] "foo"という属性があるEという要素
<E foo="xyz">
td[colspan]colspan属性が設定されているtd要素。(属性の値は何でもよい) 2
E[foo="bar"] "foo"という属性の値が厳密に"bar"と等しいEという要素
<E foo="bar">
td[colspan="3"]colspan属性が設定されその値が3であるtd要素。 2
E[foo~="bar"] "foo"という属性の値がスペースで区切られた値のリストであり、そのひとつが厳密に"bar"と等しいEという要素
<E foo="xyz bar">
p[class~="abc"]class属性にabcが入っているp要素。p.abc と同じ(.は省略形) 2
E[foo|="en"] 値が厳密に"en"であるか、"-"の直前に来る"en"で始まっているかのいずれかであるfooという属性をもつE要素 link[hreflang|="en"]"en"、"en-US"、"en-cockney"など、hreflangという属性の値が"en"または"en-"から始まるlink要素 2
E[foo^="bar"] "foo"という属性の値が厳密に文字列"bar"から始まるEという要素 p[title^="pre"]title属性がpreで始まるp要素 3
E[foo$="bar"] "foo"という属性の値が厳密に文字列"bar"で終わるEという要素 p[title$="ism"]title属性がismで終わるp要素 3
E:link
E:visited
ターゲットがまだ訪れていない(:link)か、あるいはすでに訪れている(:visited)ハイパーリンク元のアンカーであるEという要素 a:link
a:visited
まだ訪れていないa
最近訪れたa
1
E:hover
E:active
E:focus
使用者がある行為をしている間のEという要素 td:hover{background:blue}
td:active{background:red}
a:focus{background:green}
マウスが上に来ると青
マウスボタンを押すと赤
tabキーでfocusすると緑
1および2
E:lang(c) Eの言語がcであるもの span:lang(fr) {color:red}言語がフランス語のspan要素 déjà-vu 2
E:first-child その親の最初の子であるEという要素 span:first-child {background:green} span 2
E:last-child その親の最後の子であるEという要素 span:last-child {background:green} span 3
E:nth-child(n) その親のn番目の子であるEという要素 span:nth-child(2n) {background:green} span 3
E:first-line Eという要素の最初にフォーマットされる行 td:first-line {color:brown} td要素の内容のうち最初の行になる部分。 1
E:first-letter Eという要素の最初にフォーマットされる文字 td:first-letter {background:red} td要素の内容のうち最初の文字になる部分。 1
E:before Eという要素の前に生成される内容 td:before {content:"★"} td要素の内容の前に加える 2
E:after Eという要素の後に生成される内容 td:after {content:"★"} td要素の内容の後に加える 2

課題 sel.html

いままでに勉強していないセレクタを試すページを作る

時間があればsel2.html, sel3.htmlと作っていってもよい。

index.htmlからはセレクタ、セレクタ2などのリンクから行けるようにすること。

作例

E + F E という要素の直後に来る F という要素

E[foo] "foo"という属性の E という要素

E[foo~="bar"] "foo"という属性に"bar"という値が入っている

:first-letter 疑似要素