css en <hr>, una explicadita

[angelseron]

Buenas por internet me choque con el siguiente codigo

en el htm

<div class="hr"><hr /></div>
-------------------

en el css

div.hr {
height: 15px;
background: #fff url(hr1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}

---------------
entiendo la parte de aplicarle el estilo al hr :
height: 15px;
background: #fff url(hr1.gif) no-repeat scroll center;

pero no entiendo con que fin se pone
div.hr {
, y mas abajo
div.hr hr {
display: none;
}

porque yo utilizaria .hr { o #hr { o hr {

Les agradeceria una explicada por favor sobre todo lo de unir div.hr hr {

gracias.

[AlvaroG]

a ver, todo esto viene a intentar "solucionar" las diferentes implementaciones de css para hr que tienen los navegadores.
No me parece una solución prolija, me parece una 'chanchada', pero bueno....

Lo que sucede es que entre navegadores se usan diferentes propiedades para darle color a un hr (por ejemplo), no recuerdo ahora cuál debería aplicarse (creo que background-color), pero para "pintar" de azul un hr, según el navegador tendrías que hacer:

- color : blue;
o
- background-color : blue;
e incluso creo haber visto que era necesario un borde...
- border-color : blue;

Por lo que hacer css para hr puede ser problemático....

¿para qué usan ese html y ese css?
Para tener un hr "personalizado", sin sustituirlo puramente con css.

No te confundas con el nombre de las clases y etiquetas,
pero no entiendo con que fin se pone

div.hr { }
aplica estilos a los div cuyo atributo "class" es "hr"

div.hr hr { }
aplica estilos a los "hr" que están dentro de div de clase hr.
Probablemente tengan otros estilos para los hr en otras páginas.

display:none es usado para ocultar la verdadera barra.

Pero repito, es una muy mala forma de hacerlo.


Saludos.