HTML/CSS/List Style/LI class

Материал из Web эксперт
Перейти к: навигация, поиск

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

  1. div ol li
  2. div ol li
  3. 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>

  1. Item one
  2. Item two
  3. 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>