grouping CSS elements - html

Question

I'm having a real hard time wrapping my brain around grouping different selectors and styles into one coherent setup.
I found this one set of CSS/HTML code that is exactly what I need (http://jsfiddle.net/joshnh/daFDn/) but I'm at a loss how I can utilize it with my setup.
body {
padding: 50px;
}
ul {
border: 1px solid #444;
display: inline-block;
height: 301px;
position: relative;
width: 400px;
}
li {
font: bold 16px/100px sans-serif;
height: 100px;
}
a {
border-right: 1px solid #444;
border-top: 1px solid #444;
color: red;
display: block;
text-align: center;
text-decoration: none;
width: 99px;
}
li:first-child a {
border-top: none;
}
li:nth-child(2) a {
color: blue;
}
li:nth-child(3) a {
color: green;
}
a:hover {
background: red;
color: #fff;
}
li:nth-child(2) a:hover {
background: blue;
color: #fff;
}
li:nth-child(3) a:hover {
background: green;
color: #fff;
}
img {
background: red;
display: none;
height: 301px;
position: absolute;
right: 0;
top: 0;
width: 300px;
}
li:nth-child(2) img {
background: blue;
}
li:nth-child(3) img {
background: green;
}
a:hover + img,
img:hover {
display: block;
}
I have a WordPress site, using Headway Themes (GUI theme creator). I want to create a section on one page that does exactly what the Fiddle does. I also don't want any other similar HTML elements to be affected by the CSS in that fiddle. (i.e. I use LI's elsewhere on the site and don't want them "font: bold 16px/100px sans-serif;" like this example).
For me, this truly baffles my mind and would seriously appreciate some guidance on how to structure this correctly.
I'm sure I need to create an ID (because this page will be unique to the rest of the site) but I'm not sure that this is correct syntax for an ID:
#switch ul {border: 1px solid #444;display: inline-block;height: 301px; position: relative;width: 400px;}, li {font: bold 16px/100px sans-serif;height: 100px;}
(as an example but is essentially what I want to do)

Answer 1

Just had a quick stab at this - As you say, you'll need to add something to limit those selectors to the scope you're interested in. An id is one way of doing this - in that case you would need to update your selectors to look something like: http://jsfiddle.net/2osg7a31/
Two things to look out for:
- ul#switch instead of #switch ul (since you're applying the styles to the ul that has an id of #switch, rather than a ul with a descendant of #switch)
- Make sure all styles for the descendants are limited to the #switch id too, not just those applied directly to the ul tag.
I'd suggest using a class instead of an id might be a better idea, since you're only adding the identifier to allow styling, rather than to try and identify the element uniquely: http://jsfiddle.net/0h54wseL/

Answer 2

Yes, you'll need to use and id or preferably a class which is better if you want to repeat that specific fiddle in other pages of your website. The way to do it is to add a .switch in every css entry for the list style. Then in your HTML put the whole ul inside a div with class="switch".
HTML:
<div class="switch">
<ul>
<li>
Item 1
<img src="" alt=""/>
</li>
<li>
Item 2
<img src="" alt=""/>
</li>
<li>
Item 3
<img src="" alt=""/>
</li>
</ul>
</div>
Here is the fiddle to explain : http://jsfiddle.net/zyd1822w/1/
Also check this link for more info about essential css selectors.
I hope this helps.