Ver Mensaje Individual
  #14 (permalink)  
Antiguo 02/01/2011, 12:57
kseso?
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: problemas con :hover

Cuando hablaba de hermanos y adyacentes quería hacer distinción, como bien ha dicho alguien, a elementos que estando dentro del mismo contenedor (y a la misma "altura") pueden ser o no consecutivos.

> selector de descendiente, con independencia de la profundidad
body > p {}
Con algunas particularidades respecto al de elemento contenido:
body p {}

selector de hermanos adyacentes (en el html no debe haber otras etiquetas entre ellos)
p + p

selector de hermanos (en el html pueden intercalarse otras entre ellos)
p ~ p

Normalmente se utilizan este tipo de selectores sin hacer referencia a la clase (o id) que se le asignen.
El ejemplo más típico es el relativo a dejar sangrías en los párrafos, con independencia de otras propiedades y de las clases diferentes con las que las apliquemos.

Un caso concreto es cómo aplicar una sangría a todos los párrafos menos al primero, con total independencia de otros aspectos.
Código CSS:
Ver original
  1. p {text-indent: 0;}
  2. p ~ p {text-indent: 3em;}
Si usamos el selector de hermano adyacente (+), podríamos encontrarnos con que entre dos /p/ se intercalase otra etiqueta (una imagen por ejemplo), con lo que el párrafo siguiente a la imagen no tendría la sangría.

mariomon17:
en su caso sería:
Código CSS:
Ver original
  1. .uno:hover ~ div.tres {propiedades}
si es que sólo aplicará la clase tres a cajas.
Si quiere afectar a cualquier elemento hermano de "uno" al que le declare la clase "tres"
Código CSS:
Ver original
  1. .uno:hover ~ .tres {propiedades}

Espero haber sido capaz de explicarme.