ID's beginning with numbers - Styling Someone else's Code

Question

I have a website that I have to re-design that's using a web-to-print ecommerce service. They give me access to most of the websites code so i can style the site myself. My issue is that for some reason the company that we use does not let us change the HTML of the top navigation bar, saying it would interfere with their back-end javascript that animates the navigation. Sadly their programmer decided to name their ID's with numbers at the start of them which makes it almost impossible to style it from a style sheet. (ID's can not have numbers at the start of them.) I'm going to post the code they gave me to work with, and then also post my code that I changed to create the desired affect. The issue is I can't use my current code because I had to change their ID's to make it work. Does anybody know a work-around that could get the desired affect i'm looking for in my second demo without changing the ID names? I tried inline styling, but I don't think it's possible to get a hover affect with inline.

www.offsetprinting.com

Demo 1 - Using The HTML ID Tags i have to use.

Demo 2 - Using My HTML Changes to the ID's with Desired Affect.

<body class="desktop webkit webkit_525">
        <div id="header">
            <div class="content_width rel">
                <a href="./Welcome to our site!_files/Welcome to our site!.html">
                    <div id="header_logo"></div>
                </a>                

                <ul id="top_nav">
                    <li><a class="home_icon" href="./Welcome to our site!_files/Welcome to our site!.html">Home</a></li>
                    <li><a href="http://www.offsetprinting.com/account/contact">Contact</a></li>
                    <li><a href="https://secure.offsetprinting.com/account/estimate">Estimates</a></li>
                    <li><a href="http://www.offsetprinting.com/helpcenter">Help Center</a></li>
                    <li><a href="https://www.grifolsorderdesk.com/">Grifols</a></li>
                    <li><a href="http://www.salesaidtools.com/">Sales Aid Tools</a></li>
                    <li><a href="https://secure.offsetprinting.com/account/summary">Shopping Cart</a></li>
                    <li class="last-child"><a href="https://secure.offsetprinting.com/account/dashboard">My Account</a></li>
                </ul>

                                <ul id="loginbar" class="rounded">
                    <li><a href="https://secure.offsetprinting.com/account/signup">New Account</a></li>
                    <li class="last-child"><a href="https://secure.offsetprinting.com/account/login">Login</a></li>
                </ul>

                <div id="header_products"></div>                


                <div id="product_search">
                    <input id="product_ti" class="default" type="text" value="Find A Product">
                    <input id="product_btn" type="button" value="Search">
                    <input id="product_default" type="hidden" value="Find A Product">
                </div>      
            </div>
        </div>


<!-- Navigation Bar //// Had to change ID's with numbers at the front to add hover affect with CSS -->
<div id="nav">
    <ul id="nav_links" class="content_width_adjust">
        <li id="color_offset_printing" style="width:183px;background-color:#343232;height:44px;border-top:4px solid #009ad6;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent narrow" href="">
                <span>4-Color Offset Printing</span>
                                                </a>
                                                    </li>
        <li id="large_format" style="width: 139px; background-color:#343232;height:44px;border-top:4px solid #c60077;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent wide" href="">
                <span>Large Format</span>
                                                </a>
                                                    </li>
        <li id="color_printing" style="width: 164px;background-color:#343232;height:44px;border-top:4px solid #cec41e;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent" href="">
                <span>1&2 Color Printing</span>
                                                </a>
                                                    </li>
        <li id="color_digital_printing" style="width: 189px; background-color:#343232;height:44px;border-top:4px solid #000000;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent narrow" href="">
                <span>4-Color Digital Printing</span>
                                                </a>
                                                    </li>
        <li id="roll_labels" style="width: 130px; background-color:#343232;height:44px;border-top:4px solid #565656;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent wide" href="">
                <span>Roll Labels</span>
                                                </a>
                                                    </li>
        <li id="services" class="last" style="width: 133px;background-color:#343232;height:44px;border-top:4px solid #848484;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;">
            <a class="nav_parent services" href="">
                <span>Services</span>
                                                </a>
                                                    </li>
    </ul>
</div>

So do not use the ids and use indexes or have them add a class or http://stackoverflow.com/a/30669963/14104 — epascarello, Jun 05 '15 at 16:51
Just Updated the Demo 2 with the correct one. They will not change any of their Javascript to match my new ID's. They said to change the code they would have to charge us a extra $500 just to switch out the ID's. What do you mean by use indexes? — Darius Shojaei, Jun 05 '15 at 16:53

Mathieu David · Answer 1 · 2015-06-05T17:12:46.063

2

You could use the attribute selector:

[id='4_color_offset_printing'] {
    /* Your styling */
}

Alternatively you could escape the number:

#\34 _color_offset_printing{
    /* your styling */
}

This has the benefit of not having to edit the html

edited Jun 05 '15 at 17:12

answered Jun 05 '15 at 16:54

Mathieu David

4,706
3
18
28

The first thing I thought of was nth-child but this works better to target the ID still in case things get shuffled in the menu. – kel Jun 05 '15 at 17:01
I ended up adding a class attribute to each element that had the wrong ID format. This fixed the problem, and they had no problem updating the HTML slightly after i bugged them to death. – Darius Shojaei Jun 05 '15 at 17:28
Sure :) That's a good choice too. I was assuming that it wasn't an option – Mathieu David Jun 05 '15 at 17:35

score 1 · Accepted Answer · answered Jun 05 '15 at 16:58

It seems like many of them are missing classes, why don't you add classes that are the id minus the number in front then in the css reference the elements by class.

html:

<li id="4_color_offset_printing" style="width:183px" class="color_offset_printing"><a class="nav_parent narrow" href=""><span>4-Color Offset Printing</span></a></li>

css:

.color_offset_printing a:hover { /* Controls the hover affect on divs that     contain the link */
    background-color:#009ad6;
    height:11px;
}
.color_offset_printing {
    width:200px; 
}

I actually noticed that about 10 minutes after i asked this question. Adding the separate class attribute fixed the issues, and they told me they would update the HTML with the classes because it does not affect their Javascript. Thanks for the advice! — Darius Shojaei, Jun 05 '15 at 17:25

ID's beginning with numbers - Styling Someone else's Code

2 Answers2