me hago un lio con las pseudo clases...

[00israel]

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.

[pzin]

Iniciado por 00israel

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"?

Pues lo pondrás donde te haga falta. En este caso, por ejemplo, ponerle a li como un elemento de bloque no tiene sentido ya que está flotado, y se computa automáticamente así. ¿Quieres que el enlace ocupe todo el ancho del elemento de la lista? Entonces se lo pones al enlace.

Iniciado por 00israel

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.

Es que siempre dependerá del caso. Es algo ambiguo lo que preguntas porque no sabemos qué diseño tiene todo eso. Siempre depende un poco del entorno. Aunque por lo general, si puedes especificar las cosas en el elemento más interno menos problemas te puede causar. Digo, como norma general y no como verdad absoluta.

Iniciado por 00israel

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?.

Si. Los media-queries lo que hacen habitualmente es cambiar valores o añadir nuevos.