HTML/CSS/List Style/LI class
Содержание
First-child Selector
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li:first-child { font-weight:bold; color:red; } </style> </head> <body>
p.my-class
- div ol li
- div ol li
-
div ol li p.my-class
</body> </html>
</source>
li:before
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> li:before {
display: marker; marker-offset: 10em; content: counter(item, lower-roman) " "; counter-increment: item;
} </style> </head> <body>
- Item one
- Item two
- Item three
</body> </html>
</source>
li.last:after
<source lang="html4strict">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul,li {
display: inline; margin: 0; padding: 0; font-weight: bold; font-style: italic;
} li:after {
content: ", ";
} li.last:after {
content: ".";
} p {
display: inline;
} </style> </head> <body>
Heading 3
Text
- ONE
- TWO
- THREE
- FOUR
- FIVE
Text
</body> </html>
</source>
ul li:before content:"\2192 \0020"
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Chapter 3 Example: :before and :after Pseudo-elements</title> <style type="text/css" media="screen"> body { padding:.5em; } ul li:before { content:"\2192 \0020"; } </style>
</head> <body>
- List item 1
- List item 2
- List item 3
- List item 4
</body> </html>
</source>