child selector

**grifone** · 08-10-2012, 14:14

Ciao,
ho questo semplice menù

codice:

<html>
    <head>
        <style>
            body {background-color: #ccc;}

#navigation > li a {
display: block;
font-weight: bold;
color: white;
font-size: 16px;
text-shadow: 1px 1px 3px #2B2B2B;
text-transform: uppercase;
}

#navigation > li.store a {
background: url(../img/cart.png) left no-repeat;
padding-left: 35px;
}

#navigation > li.active a {
color: #FA7609;
text-decoration: underline;
}
        </style>
    </head>
    <body>
        <ul id="navigation">[*]home
            <li class="store active">
                store
            <div>
                <ul>[*]prod 1[*]prod 2[*]prod 3[/list]
            </div>
            
            [*]about[*]contatti[/list]
        
    </body>
</html>

Vorrei che tali stili fossero applicati agli elementi (li) direttamente figli di #navigation e non ai sottomenù, ho provato così ma non funge

codice:

#navigation > li a {...}
#navigation > li.store a {...}
#navigation > li.active a {...}

non capisco dove sbaglio

**grifone** · 08-10-2012, 16:06

ho risolto così:

codice:

#navigation > li > a {...}
#navigation > li.store > a {...}
#navigation > li.active > a {...}

vi sembra giusto a livello logico? oppure c'è una diversa best practice in questi casi?

**Mich_** · 08-10-2012, 16:28

Il livello logico mi sembra corretto.

C'e` solo un problema con le vecchie versioni di IE, che non riconoscono il selettore "figlio diretto".

Inoltre non mi piace il nome "active" per la classe: ":active" e` una pseudoclasse e potrebbero esserci dei casi in cui si fa confusione (che magari saltano fuori a distanza di tempo quando non ci pensi piu`).

**grifone** · 08-10-2012, 16:58

grazie

Discussione: child selector

Strumenti discussione

Ricerca discussione

Visualizza

child selector

Permessi di invio