Log in

View Full Version : how make odd css


sreerag
09-14-2013, 06:47 PM
How make css with two class like odd and even?
Deadweight
09-14-2013, 07:04 PM
.odd {}
.even {}

however i dont think that is what you are asking.
LearningCoder
09-14-2013, 10:38 PM
Good evening,

Is this what you want?



<!DOCTYPE HTML>
<html>
<head>
<title>Complete Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="font_style.css" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>

<style type="text/css">
ol li:nth-child(odd)
{
color: red;
}
</style>
</head>

<body>

<ol>
<li>this is first</li>
<li>this is second</li>
<li>this is third</li>
<li>this is fourth</li>
</ol>

</body>
</html>


Kind regards,

LC.
sreerag
09-16-2013, 08:14 AM
No in toplists there two class one by one example:red class white class and again red class again white class
jscheuer1
09-16-2013, 11:34 AM
What is "toplists"?

Please include a link to the page on your site that contains the problematic code so we can check it out.
sreerag
09-22-2013, 09:48 AM
Like this site I want to add in my site that blue and green class of music album category

http://123musiq.mobi/songs/1/latest
jscheuer1
09-22-2013, 02:51 PM
That server isn't resolving at the moment. But, from the description you give, it sounds like LearningCoder's answer is what you're looking for. Perhaps you just don't know how to use it. I mean, this can be done various ways, LearningCoder's solution is a good one. Or it might be something else you're looking for, Did you try LearningCoder's solution?
LearningCoder
09-22-2013, 06:41 PM
Good evening all,

You can always add:


<!DOCTYPE HTML>
<html>
<head>
<title>Complete Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="font_style.css" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>

<style type="text/css">
ol li:nth-child(odd)
{
color: red;
}

ol li:nth-child(even)
{
color: green;
font-weight: bold;
}
</style>
</head>

<body>

<ol>
<li>this is first</li>
<li>this is second</li>
<li>this is third</li>
<li>this is fourth</li>
</ol>

</body>
</html>


That way you can style the odd and even list items exactly how you want without assigning a class to each and every other list item.

Or you could in theory I suppose:

Let's say you are styling all the 'odd' list items. Give your whole list a default style (style it how you would like the EVEN list items to appear, then just add the ol li:nth-child(odd) declaration to change the odd list items.

Your question was quite vague so not sure exactly what you're looking for!

Put the whole code above in a new HTML file and run the file!

Kind regards,

LC