Posts Tagged ‘css’

Easiest way to building zebra tables in css

I found myself stuck with a real strange but interesting thing. I just needed to get the design as in the picture below. If it were only for html page, it would have been indeed a child’s play. But the problem was that it had to be fetched dynamically.
Picture1 :

I tried the best way to learn. Googled it. I tried in forums as well, but the solution came in the form of javascript codes which I am really afraid of. I infact avoid using javascript, for I am not at all comfortable with the codes. Thereafter, there was the css property to my rescue. Its the nth child pseudo class expression property.
The codes go as:

tr:nth-child(2n+1) /* represents every odd row of a html table */
tr:nth-child(odd) /* same */
tr:nth-child(2n) /* represents every even row of a html table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

But the issue was that, this cannot work in IE. A big issue for me.
So at last, I tried php and succeeded.
Here is the code that will get the thing done easily and without any javascript jargon.

CSS can be so interesting?



I could not imagine there could be so much new things implemented in a simple CSS. There are still a myriad of things that are left uncovered, a milestone unconquered. Just read about Sass, an extension of CSS3. Though it is Sassy CSS or Syntactically Awesome Stylesheets, I would call it Sexy CSS. It is HAML equivalent for CSS and comes along with Haml. I tried to have a know how about Haml but met with a little success.
More about the features and details can be found here.

Not only this, there is also something called LESS, Leaner CSS, the details of which can be found here.

I am not very sure about this topic but have posted for I have a terrible memory. More about this will follow soon.