How do i add a style to a specific list element, i.e. single
inside
in this?

Question

I have a problem regarding CSS styling for my list.

Here is the code.

CSS

NAV {
width: 940px;
height: 50px;
float: left;
font-family: Geneva,Arial;
border: 1px solid #000000;
background-color: #D0DBF0;}

NAV ul {
    margin: 0px auto;
    padding-top: 15px;
        padding-left: 70px;
    list-style-type: none;
}
NAV li {
    display: inline;

}

NAV li a {
    float: left;
    text-align: center;
    border-right: 2px solid #00DBF0;
    width: 100px;  
    font-size: 14px; 
    padding: 0px 10px;
    color: #0000FF;
    text-decoration: none;
}

HTML

<NAV>
        <UL>
            <LI><a href="#">Home</a></LI>
            <LI><a href="#">About Us</a></LI>
            <LI><a href="#">Contact Us</a></LI>
            <LI><a href="#">Red Widgets</a></LI>
            <LI><a href="#">Blue Widgets</a></LI>
            <LI><a href="#">Green Widgets</a></LI>
        </UL>
    </NAV>

So here i have designed everything for navigation list, but for the first list i.e home.

<LI><a href="#">Home</a></LI> i want right border. please help me.

You are writing in capital letter for your tags declaration .. what's the doctype ? — Milche Patern, Jan 29 '13 at 12:55

Anthony Grist · Accepted Answer · 2013-01-29T12:33:24.977

8

You can do it using the :first-child pseudo-class:

nav li:first-child

or

nav li:first-child a

depending on whether you want to target the list item (<li>) or anchor (<a>).

edited Jan 29 '13 at 12:33

answered Jan 29 '13 at 11:28

Anthony Grist

38,173
8
62
76

ok cool, but what if i need that for the second item in the list? – Pavan Nadig Jan 29 '13 at 11:44
Use the `:nth-of-type` selector, e.g. `:nth-of-type(2)` – Daniel Cheng Jan 29 '13 at 11:46
well i used `NAV li a:first-child { border-left: 3px solid red;}` but the border got applied to all the `
` :-(

Pavan Nadig

Jan 29 '13 at 12:03

note that i have already given right border to all the `

` in styling `

– Pavan Nadig Jan 29 '13 at 12:07

Benjamin Crouzier · Answer 2 · 2013-01-29T12:46:42.007

2

You should add a class, or id.

For example (Let's also assume later you want a "current selected" item):

CSS:

.first a { /* specific style for first item */ }
.current a { /* specific style for current item */}

HTML:

<NAV>
        <UL>
            <LI class="first"><a href="#">Home</a></LI>
            <LI><a href="#">About Us</a></LI>
            <LI class="current"><a href="#">Contact Us</a></LI>
            ...

            <!-- if the first item happens to be the curent one: -->
            <LI class="first current"><a href="#">Home</a></LI>
        </UL>
</NAV>

JsFiddle here

edited Jan 29 '13 at 12:46

answered Jan 29 '13 at 11:30

Benjamin Crouzier

40,265
44
171
236

css selector solution seems to be more elegant. – Daniel Cheng Jan 29 '13 at 11:37
@DanielCheng True for the simple case asked by OP. However the class approache has some advantages: It has better [browser support](http://stackoverflow.com/questions/7938521/browser-support-for-css-first-child-and-last-child), tought it's not a big deal anymore. And I find it better in the case you want a "current" highlighted element, which you almost always want. But let's not argue. Let both solutions be here, and everyone chose whatever is fitting. – Benjamin Crouzier Jan 29 '13 at 11:40
@pinouchon - It doesn't work as i have already given border to the whole `
` . Now again i need to give border to the first element inside that `
`
– Pavan Nadig Jan 29 '13 at 11:49
@PavanNadig You're right. You have to specify styles on the `a` inside the `li` to override the previous rule. I edited my answer and added a jsFiddle to make it work. – Benjamin Crouzier Jan 29 '13 at 12:47

How do i add a style to a specific list element, i.e. single inside in this?

2 Answers2

How do i add a style to a specific list element, i.e. single
inside
in this?