What classes of selectors should be used to influence these elements with an odd number?

Question

Here is the page I am influencing: http://www.careerchoiceswithlaura.com/blog/

Checking the items will show that I configured one class "blog-post" and added it to each entry on the page. Then I use a simple algorithm to apply the class with an “even number” or “odd number”, as well as for the corresponding entries, so that I can stagger the color effects and make the page more readable.

The problem is that when I apply the rules using the following line in the CSS file:

.blog-post .odd-numbered { background: #ddd; } 

.. it does not affect elements with blogs and odd numbers; in fact, the rule does not affect the page.

Can someone explain why and which class selectors I should use to influence the specified elements?

I researched online and found this article in W3 very useful (and it seems that the rule should work if you look at / blog /: 279 on the page I mentioned above), but even with the rule there it seems nothing to the elements I'm trying to customize.

Answer 1

Your sample selector defines elements with the odd-numbered class that have an ancestor element with the blog-post class.

In your HTML, the .blog-post element is also the .odd-numbered element.

Therefore, your selector should be .blog-post.odd-numbered (note the absence of a space).

Answer 2

You need these CSS pseudo selectors:

 elementname:nth-child(even) 

and

 elementname:nth-child(odd) 

Documentation: http://www.w3.org/Style/Examples/007/evenodd

Answer 3

To create the same element with two class names, you want (without a space):

 .blog-post.odd-numbered { background: #ddd; } 

You original style with space style element with class odd-numbered inside element with class blog-post

Answer 4

from CSS3

 :nth-child(odd) 

Answer 5

You should apply as .blog-post.odd-numbered { background: #ddd; } .blog-post.odd-numbered { background: #ddd; } without classes btw css without spaces. If it applies to the same element.