パーフェクトCSSテクニック2
使用頻度5パーセント以下のセレクタ
前回の記事の続きとなります。
CSSで編集する時、id名やclass名はおろか単体でセレクタを記入してしまうときもある。
今回はあまり使われていない、頻度の低い層のセレクタを使ってみることにする。
ブラウザはFireFoxで確認したため、他のブラウザでは多少動作が変わるおそれがあります。
要素名[属性名]
a[href]{ font-size: 18px;} /* アンカーにhrefがあるものに適用 */
a[target]{ font-size: 18px;} /* アンカーにtargetがあるものに適用 */
a.design[name]{ font-size: 18px;} /*アンカーにnameがありさらにクラス名がdesignに適用 */
要素名[属性名=属性値]
a[href="http://www.hatena.ne.jp"]{ font-size: 18px;}
/* アンカーのhrefがはてなのTOPページのURLの時に適用 */
a[align="center"]{ font-size: 18px;}
/* アンカーのalignがcenterのものに適用*/
a[class~=design]{ font-size: 18px;}
/* 空白区切りのクラス名にdesignを含むものに適用*/
/* <a class="design"> 〇 */
/* <a class="design date"> 〇 */
/* <a class="design date text"> 〇 */
/* <a class="date text design"> 〇 */
/* <a class="designdatetext"> × */
a[id~=design]{ font-size: 18px;}
/* 空白区切りのクラス名にdesignを含むものに適用*/
/* <a id="design"> 〇 */
/* <a id="design date"> 〇 */
/* <a id="design date text"> 〇 */
/* <a id="date text design"> 〇 */
/* <a id="designdatetext"> × */
言語による区分け
a[lang|=ja]{ font-size: 18px;} /* lang=jaの要素に適用 */
a[lang|=fr]{ font-size: 18px;} /* lang=frの要素に適用 */
/*
英語（en)
フランス語（fr）
イタリア語（it）
日本語（ja）
韓国語（ko）
ロシア語（ru）
中国語（zh）
*/
重複クラス名指定(含まれていればOK)
p.design.decoration{ font-size: 18px;}
/* <p class="design decoration"> 〇 */
/* <p class="design decoration test"> 〇 */
/* <p class="design"> × */
/* <p class="designdecoration"> × */
p.a.b.c.d.e{ font-size: 18px;}
/* <p class="a b c d e"> 〇 */
/* <p class="e d c b a"> 〇 */
/* <p class="a 1 b 2 c 3 d 4 e 5"> 〇 */
/* <p class="a b c d "> × */
/* <p class="abcde "> × */
idとクラス重複(idの重複は存在しない)
p#design.decoration{ font-size: 18px;}
/* <p id="design" class="decoration"> 〇 */
/* <p id="design" class="decoration date"> 〇 */
/* <p id="design" class="decorationdate"> × */
p#a.b.c.d.e{ font-size: 18px;}
/* <p id="a" class="b c d e"> 〇 */
/* <p id="a" class="e d c b"> 〇 */
/* <p id="a" class="e d c b s p q r"> 〇 */
/* <p id="a" class="e d"> × */
最初のタグの要素だけに適用
p:first-child{ color: #F00;}
/* <p>一個目のpには適用</p> */
/* <p>二個目のpには不適用</p> */
/* <p>三個目のpにはやっぱり不適用</p> */
はじめの1文字のみ適用
p:first-letter{ color: #F00;}
/* <p>これからのこだけ適用</p>*/
はじめの一行のみ適用
p:first-line{ color: #F00;}
/* <p>これからのこれからも全部適用</p>*/
ちなみにfirstだけしかなく、secondやthirdといった設定をしても
効果は出ない
前後に自動的に文字を挿入させる
前
p:before{ content: "<";}
/* ソース : <p>何か</p> */
/* 実際 : <何か */
p:before{ content: "文字でもいいんだぜ";}
/* ソース : <p>何か</p> */
/* 実際 : 文字でもいいんだぜ何か */
後
p:after{ content: ">";}
/* ソース : <p>何か</p> */
/* 実際 : 何か> */
p:after{ content: "文字でもいいんだぜ";}
/* ソース : <p>何か</p> */
/* 実際 : 何か文字でもいいんだぜ */
前後併用
p:before{ content: "【";}
p:after{ content: "】";}
/* ソース : <p>何か</p> */
/* 実際 : 【何か】 */
ちなみにこの挿入文、Operaとかで見ない限りコピペが出来ないため
コピペ不可な歌詞や引用文を設定しても効果はあります。
しかしCSSの定義上その方法はJavaScriptで制御するのが一番となります。
@media ブロック(特定の端末で表示を変える)
@media screen{
p{ font-size: 18px }
h1{ font-size: 2em }
} /* 一般的な画面での設定 */
@media tty{
p{ font-size: 9px }
h1{ font-size: 1em }
} /* 端末での設定 */
@media print{
p{ font-size: 18px }
h1{ font-size: 2em }
} /* 印刷での設定 */
@import宣言(スタイルシートファイルの呼び出し)
@import "スタイルシートのURL";
@import url(index.css);
import以外の呼び出しに<link>があります
応用でセレクタ
@media screen{h1[lang|=ja] + p.dot > a[id~=people].design.date:first-child:hover{ color: #F00;}}
/* 適用箇所
<h1 lang="ja">本題</h1>
<p class="dot">
<a id="people" class="design date">何かと</a>
<a id="people" class="design date">何かと</a>
</p>
*/
最後の最後にとんでもなものを書いてみました。
説明をすると
- mediaは汎用のパソコン画面
- 言語設定がjapaneseのh1に隣接している
- class名がdotのpタグの中にある
- 一個目のidにpeopleが含まれ
- class名はdesignとdateがある
- それをhoverさせると適用される
まずこんな複雑な方法で設定する人はいません。
しかし言い換えればCSSのセレクタはここまで複雑に厳密に分岐
させられるという事を意味しているのです。
次回からは、一般的に使われないプロパティーの説明や値の説明を
していこうと思います。
