Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Denis Epshteyn
seal-mask
.a{fill-rule:evenodd;}techdegree
Denis Epshteyn
Front End Web Development Techdegree Student 4,175 Points
Posted by Denis Epshteyn
.a{fill-rule:evenodd;}techdegree
Denis Epshteyn
Front End Web Development Techdegree Student 4,175 Points

CSS selectors practice bug? Problem targeting text-decoration: none

So in the CSS selectors practice there is a task /* Remove the text decoration from navigation links*/

if i target this way (this is the way in the video answer btw):
nav a {
text-decoration: none;
}
/* in this case it works perfectly */ .

If I do it this way:

nav li { .

text-decoration: none;

} .

/* In this case it doesn't work*/ .

html is the following: <header> . 

    <!-- LOGO --> .  

    <img src="logo.png" alt="Bookworm"> .  

    <nav> .  

      <ul> .  

        <li><a href="#">About</a></li> .  

        <li><a href="#">Articles</a></li> .  

        <li><a href="#">News</a></li> .  

        <li><a href="#">Get in Touch</a></li>    

      </ul> .  

    </nav> .  

  </header> .

In both cases the logic is the same, just different child elements, so what is the problem?? Am i doing something wrong?

4 Answers

Brandyn Lordi
Brandyn Lordi
17,778 Points
Brandyn Lordi
Brandyn Lordi
17,778 Points

It looks like you are trying to apply text-decoration:none; to the <nav><li>, but the browser default text-decoration is actually applying the the <a> that is nested within the <li>, rather than the <li> itself.

<li> tags dont have browser styling by default, but <a> tags usually do.

Does that make sense?

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Denis Epshteyn ! I'm going to leave my two cents in the hope that it helps clear up some things. First, the text-decoration property is a property on text. It doesn't matter what element it resides in, as opposed to the answer left by a third student. edit: this referred to another answer that was deleted after the posting of this answer

The key here is specificity. Your browser has default style sheets that it applies to everything. And in that stylesheet is something that specifically tells it how handle <a> tags when no other overriding rules are given. Take a look at this simple example.

  <ul>
      <li>First item</li>
      <li>Second item</li>
      <li><a href="#">Third item</a></li>
  </ul>

and the css:

li {
      text-decoration: tomato wavy underline;
}

You might be surprised at the results. The first two list items (in Chrome at least) will show a reddish wavy underline. It's the last one that's interesting. It shows a link with a blue wavy underline and a blue straight underline. Both at the same time. This is because the specificity of the browser's default CSS is overriding the rules on the <li>.

Hope this helps! :sparkles:

Denis Epshteyn
seal-mask
.a{fill-rule:evenodd;}techdegree
Denis Epshteyn
Front End Web Development Techdegree Student 4,175 Points
Denis Epshteyn
.a{fill-rule:evenodd;}techdegree
Denis Epshteyn
Front End Web Development Techdegree Student 4,175 Points

In theory it seems clear. But now I am running into more questions =) So if I enter your CSS:

li {
      text-decoration: tomato wavy underline;
}

It does not affect the text in any way.. if i enter:

li {
      color: tomato;
}

It colors the text to Tomato color.
What is the problem with {text-decoration} property and <li> elements??

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Denis Epshteyn I'm not sure what to say. It affects mine. This is true both in Chrome and Firefox. In both, a wavy red line appears under the text that is inside the list items. In the third item, a blue wavy line and a blue straight line. Here is the CodePen :smiley:

Damian Toczek
Damian Toczek
4,471 Points
Damian Toczek
Damian Toczek
4,471 Points

use:

ul { list-style: none; } /* Removes the bullets aka dots / a { text-decoration: none; } / Removes the underline */

There is no point to use the text-decoration on a <li> element, because <li> isn't a text but a element. It's like using text-decoration on a <div>. Div has no "decoration" but <a> aka anchors have.