css Archive

HTMLとかCSSとかはブラウザが賢いおかげで、少々エラーが起きてもなんとか表示されるので適当になってました。
これはイカンということでCSSの細かい所を勉強してみましたのでメモを残しておきます。

CSSには疑似要素と疑似クラスというのがある。
名前なんてどうでも良いのですが、そういう存在がある事を知っておくことは損ではないですよね。

疑似クラスとは「hover」とか「link」とかです。
要素が特定の状態の時に適用されるスタイルです。

疑似要素とは「first-letter」とか「first-line」とかです。
要素内の特定の文字などに適用されるスタイルです。

要素が特定の状態の時に適用されるスタイルです。

• :link (リンクされている状態)
• :visited (アクセス済みのリンクの状態)
• :hover (マウスオーバーの状態)
• :active (アクティブ状態)

状態に依存して適用されるスタイルが異なります。

具体例。

a:link {
  color: red;
}
a:visited {
  color: gray;
}
a:hover {
  text-decoration: none;
}
a:active {
  color: red;
}

対応ブラウザ。

• :focus

テキストエリアがフォーカスされた状態に適用されるスタイル。

具体例。

input[type='text']:focus {
  background-color: pink;
}
textarea:focus {
  color: white;
  background-color: gray;
}

対応ブラウザ。

• :first-child

ある要素の子要素である状態に適用されるスタイル。

具体例。

div > p:first-child {
text-indent: 1em;
}

適用されるHTMLの例。

ここに適用される。

ここには適用されない。

対応ブラウザ。

• :lang

lang属性の付いたタグに適用されるスタイル。

具体例。

p:lang(en) {
  font-style: italic;
}

適用されるHTMLの例。

<p lang="en">
Hello!!
</p>

対応ブラウザ。

要素内の特定の文字などに適用されるスタイルです。

• :first-letter

指定された要素に含まれる一文字目に適用されるスタイル。

具体例。

.sample:first-letter {
  font-size: 150%;
}

適用されるHTMLの例。

<p class="sample">
Hello!!
</p>

対応ブラウザ。

• :first-line

指定された要素に含まれる一行目に適用されるスタイル。

具体例。

.sample:first-line {
  text-decoration: underline;
}

適用されるHTMLの例。

<div class="sample">
Hello!!<br />World.
</div>

対応ブラウザ。

• :before
• :after

指定された要素の前後に要素を追加する。

具体例。

.sample:before {
  content: url(before.gif);
}
.sample:after {
  content: url(after.gif);
}

適用されるHTMLの例。

<div class="sample">
Hello!! World.
</div>

対応ブラウザ。

だらだらと例示しましたが、疑似要素（クラス）って色々あるもんですね。
これスタイルというには越権行為やろう！ってのまでありますけど、使いこなせば細かな所に気を使った素敵なサイトができそうですね。