(個人的に) 覚えておきたいと思った :before 擬似要素 / :after 擬似要素のcontentプロパティと属性セレクタ。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

使える使えないじゃなくて、覚えておきたいと思ったかどうか

contentプロパティ
attr(x)
counter
clearfix
枠付きの吹き出し
属性セレクタと一緒に使ってみる
E[foo]
E:not(s)

contentプロパティ

attr(x)
xの部分を書き出せる。href、title、summary、cite や alt。

_html
[html]<div class="example" title="div の title要素">
<p><a href="アドレス" title="タイトル">テキスト</a></p>
</div>[/html]

_css
[css]
div:before{
content:’" ‘ attr(title) ‘ "’;
font-size:2.0em;
}
a:after {
content:'(‘ attr(href) ‘)’;
background:Olive;
}[/css]

_表示結果
divのtitleをfont-size2emで表示、aタグのリンク先を背景色oliveで書き出す。

乱雑モックアップ / フロントページ

counter
カウンター、なんでもolリストみたいにしちゃう。これ非常にわかりづらい。

content : counter (カウンターの名前, [種類 – decimalが初期値、省略可])
counter-reset : カウンターの名前 [開始番号 始めたい数-1を指定、省略可];
counter-increment : カウンターの名前 [カウンターの増加量 10なら10ずつ増えて-1なら1ずつ減ってく、省略可];

_html
[html]<div class="rank">
<p>自治体サイトランキング[2010年3月]
<dl>
<dt>大阪市(大阪府)</dt>
<dd>得点 / 8.54</dd>
<dt>三鷹市(東京都)</dt>
<dd>得点 / 8.31</dd>
<dt>相模原市(神奈川県)</dt>
<dd>得点 / 8.27</dd>
</dl>
</div>[/html]

_css
[css].rank dt{
counter-increment:rank;
}
.rank dt:before{
content:counter(rank)"位 : ";
color:red;
}[/css]

_表示結果

自治体サイトランキング[2010年3月]
(自治体サイトランキング :ゴメス・コンサルティング株式会社)

大阪市(大阪府)
得点 / 8.54
三鷹市(東京都)
得点 / 8.31
相模原市(神奈川県)
得点 / 8.27

この色が content : counterで生成された文字

clearfix
ブロック内にfloatをclearする要素が無くてもclearするアレ。

_表示省略。

_html
[html]<div id="wrap">
<div class="article">float:left</div>
<div class="aside">float:right</div>
</div>[/html]

_css / 20110403修正(:afterにheight:0があるとfirefox3.6~4でmarginがおかしくなるバグがある為)
参考:firefoxでmargin-bottomがmargin-top | 乱雑モックアップ
[css]
#wrap:after {
content : ”;
display : block;
clear : both;
height : 0.01px;/* firefox対策 */
}

/* IE 6-7 */
#warp{
/zoom : 1;
}
[/css]

枠付きのふきだし
cssだけで作る吹き出しにborderをつけた。
_表示結果

The quick brown fox jumps over the lazy dog.

チロ

_html
[html]<p class="ballon">The quick brown fox jumps over the lazy dog.</p>[/html]

_css
[css]
p.ballon {
position:relative;
background:white;
width:400px;
padding:10px 20px;
/* 角丸 */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-bottom:15px;
border:3px solid MediumVioletRed;
}
p.ballon:before {
content:”;
border-top:15px solid MediumVioletRed;
border-right:12px solid transparent;
border-left:12px solid transparent;
position:absolute;
bottom:-15px;
left:20px;
}
p.ballon:after {
content:”;
border-top:12px solid white;
border-right:9px solid transparent;
border-left:9px solid transparent;
position:absolute;
bottom:-12px;
left:23px;
}[/css]

属性セレクタと一緒に使ってみる

E[foo]
“foo”属性を持つE要素にマッチ

_html
[html]<pre title="XHTML 1.0 transitonal の DOCTYPE"><code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</code></pre>

<pre><code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
</code></pre>[/html]

_css
[css]
pre[title]:before { /* title属性をもつpre要素にマッチ */
content:’" ‘ attr(title) ‘ "’;
}
[/css]

_表示結果
title属性をもつpre要素にマッチしたらtitle属性を書き出す。
title属性あり

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

title属性なし

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
E:not(s)
sに一致しないE要素

_html
[html]<ul>
<li><a href="http://blog.sakurachiro.com/">乱雑モックアップ / フロントページ</a></li>
<li><a href="#wrap">ページの先頭へ</a></li>
<li><a href="http://www.google.co.jp/">google 日本</a></li>
</ul>[/html]

_css
[css]a:not([href^=’#’]):after {
content:’ ( ‘ attr(href) ‘ ) ‘;
background:black;
}[/css]

_表示結果
「#で始まるhref」ではない a要素にマッチ(=アンカーリンクにはマッチしない)
マッチしたらリンク先urlを黒背景で書き出す。

print用cssで使うとアンカーリンク以外のリンクを印刷に出力出来るみたい。
_css
[css]
@media print{
a:not([href^=’#’]):after {
content:’ ( ‘ attr(href) ‘ ) ‘;
}
}
[/css]

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す


You can add images to your comment by clicking here.