Correct declaration in menu listing CSS

Asked

Viewed 94 times

2

I have a menu listing and would like to know the correct way to declare in HTML+CSS.

The HTML is like this:

<ul class="menu">
    <li>Home</li>
    <li>Empresa</li>
    <li>Produtos</li>
    <li>Blog</li>
    <li class="logo"></li>
    <li>Onde Comprar</li>
    <li>Assistência</li>
    <li>Contato</li>
</ul>

As for the CSS, I would like some hint. Sure, I could put a class in each li and leave it the way I want, but I don’t know if it would be ideal, I would like to save code.

The CSS is like this:

ul.menu li{
    font-family: "nexa_boldregular";
    font-size: 12pt;
    text-transform: uppercase;
    color: #1d1d1b;
    display: inline;
    margin-right: 35px;
}

For example, if I want to style some li in particular, I would have to assign a class to it, right? As I did in the logo. The ideal in CSS would be like?

.logo, li.logo, ul.menu>li.logo?

css

  • There is no right or wrong, it will depend on your style of working or whether you will have any more element with the class .logo has to specify that refers to the element within the .menu and use something like: .menu .logo

  • But, there is a more structured way. To save labor.

  • In this case I suggest removing the html tags from the selector, use only when necessary... see this jsfiddle

  • 1

    I edited the jsfiddle and now shows how to select only the desired element, in situations using the same classes, see...

  • 1

    Thanks @Jader, very helpful!

1 answer

3


Felipe,

Every time you treat just one element, you can use the ID. Being a group to which will be assigned a common element, ai you use Classe

There is the TAG nav which I use to generally structure as follows:

<nav>
  <ul
    <li></li>
  </ul>
</nav>

Consecutively in CSS, I mean like this:

nav ul {
}

nav ul li{
}

That is, if you do not have a class, you will unlock the elements and develop the tree. If you declare a style for nav ul, he will look for a TAG ul within the nav, same as the nav ul li which could be declared as nav li for example.

About the .logo, you can declare the same singularly but in sequential lines of your code, for organization, leave the content relative to the menu, fully grouped. That is, create "sectors".

  • Thanks. Just a question, assuming I have more than one menu listing on the site. I would have to create a class nine to differentiate them, ideally I would create, so for example: nav ul.menu1 and nav ul.menu2, correct?

  • Following its structure, the correct one would be to identify the area to which your menu belongs. For example, one of them could be menuLateral while another would be menuSuperior. Or for example, if a menu is main and relative to navigation, you could have a declaration nav ul and nav li, while another, menuSecundario ul and menuSecundario li

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.