Seletores CSS

by Jader Wagner

HTML

<div class="header">
    <img class="logo" />
</div>
<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>
<div class='footer'>
    <img class="logo" />
    <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>
</div>

CSS

.logo {
    border: 4px solid black;
}
.header .logo {
    background-color: blue;
    width: 200px;
    height:50px;
}
body > .menu .logo {
    background-color: red;
    width: 100px;
}
.footer .menu {
    list-style:none;
}
.footer .menu li {
    display:inline-block;
    margin-left:10px;
}
.footer img.logo {
    background-color: yellow;
    width: 125px;
    height:25px;
    float:left;
}
.footer li.logo {
    background-color: green;
    width: 50px;
    height: 10px;
}