おぺら 6 べーた　てすと

body              { color       : black;
                    background  : white           }
h2:first-letter   { background  : aqua            }
p:before          { content     : url(../../common/heartmark.png)   }
p[class]:after    { content     : "【 class=\"" attr(class) "\" 】" }
p[lang]:after     { content     : "【 lang=\"" attr(lang) "\" 】"   }
p:hover           { color       : green           }

ふぉんとさいず

p.font-1em        { font-size   : 1em             }
p.font-100per     { font-size   : 100%            }
p.font-inherit    { font-size   : inherit         }

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

属性値せれくた

p[class="test1"]  { color       : red             }
p[class~="test2"] { color       : blue            }

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

文脈せれくたとか

span              { border      : 1px solid       }
span:first-child  { color       : blue            }

em , strong       { color       : red             }
p > em            { background  : yellow          }
p * strong        { background  : yellow          }
p.test3 + p       { color       : brown           }

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

:first-line 疑似要素

p.test4:first-line { background  : yellow;
                     font-weight : bold            }

And the beast shall be made legion. Its numbers shall be increased a thousand thousand fold. The din of a million keyboards like unto a great storm shall cover the earth, and the followers of Mammon shall tremble. from The Book of Mozilla, 3:31 (Red Letter Edition)

:lang 疑似クラス

p:lang(en-US)     { background  : yellow          }
p[lang|="en"]     { font-weight : bold            }

I wanna make up, I wanna stand up, I wanna make up.

I wanna make up, I wanna stand up, I wanna make up.

エスケープ文字

p.test5           { \63\6F\6C\6F\72 : red         }
p.test6           { \63olor     : red             }
p.test7           { \63 olor    : red             }

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

counter プロパティ

p.test8:before     { counter-increment : "test8";
                     content           : counter(test8) ". " }

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

み〜らくる〜 I just say "エトワ〜ル"

a:hover hoge

a img             { border      : 2px solid black }
a:hover img       { border      : 2px solid red   }
a:hover em        { color       : pink            }

娘娘飯店しるきぃうぇぶ

• もどる