Search code examples
csstwitter-bootstraphref

Different styles for inline links

        <div class="col-lg-3">
         <ul class="nav navbar-nav login-right">
            <li><a href="#" style="padding: 0">Login</a> or <a href="#" style="padding: 0;">create account</a></li>
         </ul>
        </div>

Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.

I tried to give normal class to each link and just to call that classes in external CSS file but solution fails.

Any idea?

Solution

  • Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.

    You can use nth-child and color both a tags differently

    ul.nav li a:nth-child(1){ color:green; }

    And

    ul.nav li a:nth-child(2){ color:blue; }

    Since both have the same padding style you can place it in a common style definition

    ul.nav li a{ padding:0; }

    Important: make sure the external file which you write this in is placed last in your HTML hierarchy. By CSS prioritisation rule the file placed last in the hierarchy gets the priority.

    Edit: seems like you have many elements with same structure. In this case it's better to select specific element and using id will be our best choice. Add id to your ul as below

    <ul id="colorMe" class="nav navbar-nav login-right">

    And change your CSS selectors to

    #colorMe li a:nth-child(1)

    Do similar to other selectors too