スタイルシートのclearfixの定義について

質問

スタイルシートのclearfixの定義はhtml上では定義していないのにどうして
.clearfix:afterと定義するのでしょうか？

あと
<div class="clearfix" id="mainblock">
<div id="mainarea" class="clearfix">

などのclassとidを両方定義しているのはどういった意味でどういう場合行うのでしょうか？
教えて下さい。

回答No.2

ulmo · ベストアンサー

ANo.1 ulmoです。

:afterは「擬似要素」と呼ばれ、タグ中ではこれは指定しません。
つまり
.clearfix:after {}
と定義してあっても、使用する場合は
<div class="clearfix">
などとします。
<div class="clearfix:after">
は誤りです。a:hover などと同様です。
ちなみに:afterは「タグが閉じた後の処理」を記述します。

回答No.1

ulmo

「html上では定義してないのに」の意味がちょっと不明ですが、
.clearfix を色々な所で使いたいから
独立したクラスとしてあるのでしょう。
こうすれば、<div class="foo clearfix">などとして
他のクラスを割り当てたタグに追加して使えます。

また、id と class を両方使う意味ですが、
class と id では役割が違うからです。
id はスタイルも指定できますが、
「ついでにできる」というだけです。
本来は、あるタグを一意に評価するために使います。
class は純粋にスタイルを指定するためのものです。

お礼

回答ありがとうございました。

「html上では定義してないのに」というのは
<div id="clearfix:after"> </div>
とHTMLで定義しないとcssで定義しても繁栄されないのではないかという意味です。
clearfixとはレイアウトが崩れないようにするという為に使うものでいいのですよね？

教えて頂いてどうも有難うございました。