読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

パーフェクト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のものに適用*/

 

 

正規表現型のセレクタ設定class

 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"> × */

正規表現型のセレクタ設定id

  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セレクタはここまで複雑に厳密に分岐

させられるという事を意味しているのです。

 

次回からは、一般的に使われないプロパティーの説明や値の説明を

していこうと思います。