Css Selectors Demo
Today we’ll take a look at one of the new features in css3, by using the selector. Css3 is packed with some new, great features, which simplifies the styling of lists. We’ll show you how to use Alternative row styling with pure css. This is something that you typically would have to use either javascript or programming (php,asp) to achieve earlier, but here you will see how to do this with just a few lines of css.
Be aware that not all browsers are yet supported to use css3. IE does not yet support this, but if you give it a try in Firefox, Opera or Safari, you’ll see how nice this plays!
This is the result:
As you can see, the even and odd is ehh..even and odd! The Every third line can be set to whatever you want. Take a look at the css:
/* Css3 selector demo by csstemplatesweb.com */ * { margin: 0; padding: 0; outline: 0; } body { background-color: #2f3135; color: #fff; } h1 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 40px 0; } h2 { font-family: "Tahoma"; color: #ececec; font-weight: normal; margin:0 0 30px 30px; } h3 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 10px 30px; } img { border: none; } #container { width: 960px; margin: 20px auto; } ul { margin: 0 0 15px 60px; } ul.odd li:nth-child(odd) { color: blue; margin-left: 15px; } ul.even li:nth-child(even) { color: green; margin-left: 15px; } ul.every3 li:nth-child(3n) { color: orange; margin-left: 15px; } p {margin:20px 0 0 40px;} a {color:#fff;} |
The only thing you need to look at here, is the 4 lines starting with ul. It’s pretty self explaining 
The html markup looks like this:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Css3 selectors</title> <link rel="Stylesheet" href="styles.css" /> </head> <body> <div id="container"> <h1>Css3 Selector demo</h1> <h2>Alternate row styling</h2> <h3>Even</h3> <ul class="even"> <li>A sample text here 1</li> <li>A sample text here 2</li> <li>A sample text here 3</li> <li>A sample text here 4</li> </ul> <h3>Odd</h3> <ul class="odd"> <li>A sample text here 1</li> <li>A sample text here 2</li> <li>A sample text here 3</li> <li>A sample text here 4</li> </ul> <h3>Every third row</h3> <ul class="every3"> <li>A sample text here 1</li> <li>A sample text here 2</li> <li>A sample text here 3</li> <li>A sample text here 4</li> <li>A sample text here 5</li> <li>A sample text here 6</li> </ul> <p>For more tutorials, articles and css templates, please visit <a href="https://csstemplatesweb.com">csstemplatesweb.com</a></p> </div> </body> </html> |
That’s it! You can download the files below if you want to play with it. Please share this if you like it!
Css3 Selectors demo (975 bytes, 296 hits)
Continue reading...
A favourite icon, called favicon, is the small icon that is displayed in the browser address bar, and it will also show in your bookmarks. It is a lot easier for the user to find the bookmark of your site, if you have created a favicon, and attached it to your website. If you look in your browser bar right now, you can see a pink little graphic square, this is the favicon of this site, making it easy to remember that you may have visited this site earlier. In short: using a favicon will improve the overall look of your website. So, how do we create a favicon? The favicon of this site is made in Adobe Photoshop.
