CODEWITHSUNDEEP
htmlcss
user123
user123

Reputation: 5407

Changing the style of leftmost menu item

Here is my Codepen demo which I want to show like image snap below the link:

Codepen Demo

Snap:

enter image description here

I used this css:

.menu > ul > li:first-child {
      color: red !important;
}

To make left most link Red but still it shows Grey line.

Actually it should look like this:

enter image description here

Problem 2:

The length of the line above alert box should span to entire width of the page. How to do this?

I tried with chaging:

.menu > ul {    
    display: block;    
    list-style: none;    
    border-bottom: 0.1em solid #9e9e9e;
    width: 152%;  // makig it 200% increase width of entire page. Rather I want to increase the width of lie only
    margin-left: -2%;

}

Upvotes: 0

Views: 52

Answers (3)

Tomas
Tomas

Reputation: 199

You forgot to add anchor selector at the end of:

.menu > ul > li:first-child a {
   color: red !important;
}

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Your code is fine, the only issue is that the a is getting overrid by the color from actual properties for the hyperlink as

a {
  // properties..
}

Change the code to this:

.menu > ul > li:first-child a {
  color: red !important;
}

Which will apply the settings to the hyperlink of the left most list item under the un ordered list in the element with class menu! :)

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20418

Try this

.menu > ul > li:first-child a {

  color: red !important;
}

DEMO

Upvotes: 1

Related Questions