tengo un pequeño lio con las pseudo clases. Un ejemplo sencillo, tengo un div, dentro un nav, dentro un ul, dentro un li, con su a, y su a:hover. Es decir:
Código:
#div{}
#div nav{}
#div nav ul{}
#div nav ul li{}
#div nav ul li a{}
#div nav ul li a:hover{}
Añado que no solo es con las pseudo clases, sino con toda clase o id que va anidado e incluso con las clases e id responsivas.
Me explico con otro ejemplo:
Código:
#topnav{
width: 100%;
margin: 0px;
padding:0px;
}
#topnav nav{
width:100%;
margin:0;
z-index: 9000;
height:auto;
background: black;
}
#topnav nav ul{
padding: 0;
}
#topnav nav ul li {
float: none;
margin: 0;
display: block;
}
#topnav nav ul li a {
border-bottom: 1px solid #ccc;
line-height: 30px;
}
#topnav nav ul li a:hover {
background: #ccc;
}
}
Por ejemplo, si todo lo que tengo dentro del "li" son unos enlaces, debo de poner las características que están puestas en el ejemplo en lugar de en el "a" en el "li"? entonces en el a no pondría nada? ¿puedo saltarme un nivel así? es decir puedo indicar en el css algo para el a:hover y a la vez no indicar nada al "a"?
Con el ul tambien tengo un pequeño lio, si quiero un padding para los elemetos de la lista se los pongo a li, o a ul o si quiero poner un fondo negro, se lo pongo al nav o a ul. Porque en ocasiones me doy cuenta de que cuando algo no me funciona, me pongo a tocar todo el css, y al final me encuentro con cosas que no se si son del todo correctas, haber metido un width: 100%, en el ul y el li, y en el a, y el a:hover.
Esto mismo me pasa con las mediaqueris, cada clase que meto en mediaqueries siempre mantendrá un atributo generico que tenía antes a no ser que lo anule o lo varie no?.
Creo que ha sido un poco patiburrillo, todo lo que queria preguntar, pero vamos la esencia es la de un ¿Como dar las caracteristicas a una clase o un selector o un id, de una forma correcta cuando voy anidando estilos en CSS? espero haberme explicado mejor con esta última pregunta.
gracias.