Home/ Questions/Q 8799167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T00:15:18+00:00

I began to learn html’n’css, but I’ve encountered one thing that I cannot explain.

  • 0

I began to learn html’n’css, but I’ve encountered one thing that I cannot explain. I have a html file, that has a div which acts like a link (in the application I am setting the div size and want for the whole box to act like a link). I cannot remove the text underline decoration for the text in the div though (Link1 in the Example is always underlined). The selector should be “any div within a link element”, and because the link is red, I think it is correct.

I managed to do this by introducing a special class for removing the underline explicitly (Link2 in the Example is ok), but I would like to have all the menu styles in one place.

The question is, whether can someone explain why the removing deco like this (Link1) does not work. Moreover, I would like to ask if the organization of the menu is a good style, or if I should reorganize the code, e.g: having this for example:

<a href="index.html" class="menuitem"><div>Blabla</div></a>

and the style:

a.menuitem {...}
a.menuitem div {width:...;}

Here is the minimal (non-)working Example:

    <html>
    <head>
    <style>
            a div.menuitem {
              text-decoration: none;
              color: red;
            }
            .remove-under {
              text-decoration: none;
            }
    </style>

    </head>
    <body>
            <a href="./index.html">
                    <div class="menuitem">Link1</div>
            </a>
            <a href="./index.html" class="remove-under">
                    <div class="menuitem">Link2</div>
            </a>
    </body>
    </html>

Thanks a lot!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Semantically speaking a <div> should not go inside an <a>. div tags are block elements where anchor tags are inline elements – and block elements should never go inside inline elements. Instead use <span> if you need to stylize something different inline but in your case, additionally, you can add a class to the <a> which would work better.

    Here is your new code:

    <a href="./index.html" class="menuitem">
    Link1
</a>
<a href="./index.html" class="remove-under menuitem">
    Link2
</a>

    You can have multiple classes to an element by putting a space, so Link2 has the class “remove-under” and “menuitem”

    Update your CSS to remove the underline:

    .remove-under {
    text-decoration:none;
}

    In order to get your whole a tag to be a link (not just the text) add the follow css for your menuitem class:

    .menuitem {
    display:block;
    width: 100px; 
    height: 50px; /* or whatever your desired width and height */
    background: red; /* to show that the whole anchor will be link, not just text */
}
    • 0