Unable to style second set of UL's without it styling first UL list

I am new to CSS and would greatly appreciate your help.

I have two set’s of UL’s - one on my Home page and the second on my Contact page.
I need to style only the UL’s on my Contact Page with text color of white.
When I use color:white all UL’s have the white color for their text.
Trying to use :nth-child but it’s not working for my second UL list.

First UL - Home Page

<ul>
        <li>Artisan Approach</li>
        <li>Mostly natural light</li>
        <li>Earthly tones and textures</li>
        <li>Minimal Post-Production for a more authentic product</li>
      </ul>

Second UL is on my Contact Page.

  <ul>
    <li>Magazine spreads</li>
    <li>Food product styling and photography</li>
    <li>Instructional and promotional cooking edits</li>
    <li>Kitchen-to-table capturing of launches and events</li>
    <li>Restaurant features</li>
    <li>Press kits</li>
  </ul>

There’s a lot of ways to handle this. I think I’d suggest putting an ID on your contact page, so you can refer to this and any other styling specific to the page. You may find you want to name all of your pages in similar fashion. So, on the contact page:

<body id="contactPage">
blah...

Then in your css, you can do:

#contactPage ul {color:white}

and it will only apply to the ul in the contact page. Your styling just for the ul will apply to ul’s in all pages, as it currently does.

Thank you for your QUICK response! I used an id on the 2nd UL and it WORKED!!
You’re AWESOME!!* :slight_smile:

    Also what is another way I can use without applying a class or id? How would I use the :nth-child with this? I’m learning and would like to know.

I think you have misunderstood how nth-child works.

I don’t have a better recommendation, and if you’re learning CSS, then ID’s and classes are fundamental to how it works. To answer your question though, you could do:

<ul style="color:white">
blah...
<ul>

directly in your contact page, and yes such inline styling doesn’t use an ID or class, but it is not the correct solution to the problem. Whenever possible, styling should be done in a stylesheet, referencing html by specificity of tags, or by ids or classes, and not hacked into the html or javascript.

Gotcha! I have an External stylesheet and wanted to avoid using the inline style method. I know it’s frowned up and not good practice. But if this is another way, then I will add this to my notes.

Much APPRECIATED! :slight_smile:

It is, but as both you and tracknut have already noted, it is not one which should be used. Classes and ids are the correct way to target styling. If, as you say, you are just learning, then stick with learning best practice. smile

2 Likes

Please try to avoid the inline style method unless absolutely necessary. It will invariably cause you confusion trying to do maintenance at some point in the future, especially if you are trying to style all items of a type the same way.

The ID or class method is the least obtrusive way for you to style that element. Plus it will keep all your css styles in one place, which will be another maintenance savings down the road.

If you’re unable to change the html for some reason, the only other option would be to use javascript to add the styles programmatically. But if you can change the html and add an id or a class, I’d recommend that approach.

2 Likes

There are reasons why we use IDs and classes much more than things like the :nth-child
The reason is specificity.
:nth-child is generic.
A class is more specific than :nth-child, therefore it has more weight. When in doubt that the same style rule may be applied to the same element, the class will win.
If you apply an ID to the same element, and there’s any style that collides with the styles set in the class or to the :nth-chid element, the ID is more specific because it is unique (it is supposed to be applied to just one element, and not any other) and will win.

So for styles that are very important, we use IDs. An ID could be use for one UL… but no any other UL in the page will have that ID.

For more generic things or styles, we use classes. So if we want to style more than one UL with the same colors, backgrouds, font-face, etc, we will use a class to give of the lists the same look.

But if things are more generic then you may simple style the element itself (UL for any list container to have the same look) and use pseudo-elements like :nth-child to style one particular UL in a specific position.

Whatever you do, it has to make sense.

As an example, I’ve only seen the :nth-child used in tables, where you always want that every other row, or every third row or whatever, to have a different background color.

nth-child wouldn’t work in this case regardless because the lists were on two different pages (I almost missed that myself). nth child only works with in one page/DOM structure, not across an entire site.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.