1 reply [Last post]
saturnstroll
Offline
newbie
Last seen: 12 years 20 weeks ago
Timezone: GMT-6
Joined: 2009-12-26
Posts: 1
Points: 2

Platform: WordPress

Goal:
1) Create a different mouseover background for each menu list item.
2) Create said mouseover bkgd without adding an extra div or class. (This is because I want to design a theme that displays unique mouseover bkgd's out-of-the-box.)

The existing selectors I can style are:

<div id="page-nav" class="page-nav">
<ul class="menu sf-menu">
<li class="page_item">

I know there is the pseudo-class, :first-child, but this only works for the first list item. Apparently, there are not
":second-child, :third-child, :fourth-child," etc..

How can one create the mouseover via css without adding a div or class?
(Or in creating a theme, I wonder if I can insert code by which list items are differentiated from each other?)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If you want to design a theme

If you want to design a theme then do so; what you are asking on the one hand is better referred to as re-skinning a theme rather, on the other hand, designing a theme which you mention. If all you want to get involved with is CSS styling then you are by default having to declare the template files and directory you are using, in other words someone else's theme.

I think that you probably need to spend a little time reading and understanding the WP docs as it's crucial to understand how the app actually works.

What you really want to be doing is creating a child theme, this will use probably the majority of a parent theme but override certain files where required.

If you simply copy the file with with the markup you need to add classes to into your directory it should override the original in the parent theme directory then you can make the changes that you require to that file. There are more sophisticated approaches one could use but this is the basic and simplest approach one can take.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me