Gracias Ramon y Adriana,
Y entonces, como puedo aplicar esos estilos sin marcar con class los <li> de
dentro del 'paginator' ?
El 'paginator' lo renderiza un control de servidor, siempre igual, y puede
estar dentro de los div 'projects', 'items', o fuera, o dentro de otros
divs.
Es decir, no quiero poner:
projects .items ul.paginator li { }
�Solo tengo estas dos alternativas: usar class en los <li>, o especificar
todas las rutas donde puede estar el ul con class paginator ?
Un saludo,
Edu
----- Original Message -----
From: "Ramon Pravia" <[EMAIL PROTECTED]>
To: <[email protected]>
Sent: Tuesday, June 07, 2005 11:00 PM
Subject: Re: [Ovillo] "cascading", no me entero
Bueno, vamos por partes, que es muy sencillo. Espero explicarme bien,
que estoy medio dormido.
En primer lugar, no tienes problemas con la cascada, tienes problemas
para comprender la herencia. Son dos conceptos diferentes y que se
suelen confundir a menudo. Cascada se refiere al orden de precedencia
de las diferentes hojas de estilo que se le pueden aplicar a un
documento html (hojas de estilo de la aplicaci�n, del autor, o del
usuario). Herencia es la forma en que las diferentes propiedades pasan
de unos elementos a sus descendientes, que es lo que te da problemas
en este caso.
Con el selector .projects .items ul li{} est�s definiendo los estilos
para *todas* las li que est�n dentro de cualquier elemento con clase
items que a su vez est� dentro de un elemento clase projects. Por lo
tanto, esos estilos afectan tanto a tu ul.paginator como a la que no
tiene ninguna clase y est�n dentro del div con class item
Luego dices que donde hay conflicto entre las reglas definidas en
ul.paginator li{} y .projects .items ul li{} prevalecen los que
defines en �sta �ltima. Eso se debe a que este �ltimo selector tiene
mayor especificidad que el primero. Esto que suena tan raro significa
que con un selector te est�s refiriendo a uno o varios elementos, y
puedes ser m�s "gen�rico" o m�s "espec�fico".
Por ejemplo, si defines reglas para ul (ul{color:red]) est�s
refiri�ndote a todas las ul en cualquier situaci�n, mientras que si
defines #abuelito #dime #tu ul{color blue} te est�s refiriendo a unas
ul en unas circunstancias mucho m�s determinadas (que descienda de un
elemento #tu, descendiente de otro elemento con id dime, que a su vez
descienda de #abuelito). En este caso, es l�gico que para una lista
que cumpla estos requisitos, si hay conflicto, se apliquen los estilos
que *m�s espec�ficamente* se han definido para ella y no los que se
han definido para todas en general.
Si quieres saber m�s sobre c�mo se calcula la especificidad de
selectores, puedes echarle un ojo al punto 6.4.3. de la especificaci�n
de css [1]. Y en cualquier caso, te recomiendo el selectutorial [2].
Y para traducir al castellano cualquier selector de css, prueba el
selecoracle [3]. No lo he probado mucho, pero creo que est� chulo.
[1] http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#specificity
[2] http://css.maxdesign.com.au/selectutorial/
[3] http://gallery.theopalgroup.com/selectoracle/
Espero haber ayudado :-)
saludos
> El problema es que tengo dos listas <ul> dentro de un <div>, la
> primera tiene un class="paginator", y la segunda no tiene class.
> Al aplicar estilos al primer ul ( ul.paginator ) me los coge, pero
> tambien me coge los aplicados a los <ul> sin clase ( .projects
> .items ul )
>
>
> En concreto, en el codigo de abajo, lo que yo quiero aplicar en:
>
>
> ul.paginator { }
> ul.paginator li { }
>
>
> si se aplica, pero tambien se aplica lo de:
>
>
> .projects .items ul { }
> .projects .items ul li { }
>
>
> y en los estilos:
>
>
> ul.paginator { margin-bottom: 10px; border-left: 0px solid #000;}
> ul.paginator li { padding: 0 5px 0 0; }
>
> prevalecen los anteriores.
>
>
> he puesto el ul "paginator" repetido, uno dentro y otro fuera, para
> ver la diferencia (lo que quiero es que dentro salga lo que sale
> fuera de los divs)
>
>
> Gracias por vuestro tiempo y un saludo,
> Edu
>
>
> /////////////////////////////////
>
>
> Este es el codigo:
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
>
>
> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
> <head> <title></title> <style type="text/css"> /*<![CDATA[*/
> .projects .items ul { border-left: 6px solid #FF7946; list-style:
> none; margin: 0; padding: 0; list-style: none; }
>
> .projects .items ul li{
> margin: 0 0 4px 0;
> padding: 5px;
> background-color: #eee;
> border-bottom: 1px solid #D6D6D6;
> overflow: hidden;
> }
>
>
> /* PAGINATOR */
> ul.paginator {
> margin-bottom: 10px;
> border-left: 0px solid #000;
> }
>
>
> ul.paginator li {
> display: inline;
> padding: 0 5px 0 0;
> margin:0;
> border-bottom: 1px solid #444;
> background-color:#eee;
> }
>
>
> ul.paginator li.selected {
> background-color:#fff;
> border: 1px solid #444;
> border-width: 1px 1px 0 1px;
> }
> /*]]>*/
> </style>
> </head>
>
>
> <body>
>
>
> <ul class='paginator'>
> <li class='selected'>1</li>
> <li><a href='pag=2'>2</a></li>
> <li><a href='pag=3'>3</a></li>
> </ul>
>
>
> <div class="projects">
> <div class="items">
>
>
> <ul class='paginator'>
> <li class='selected'>1</li>
> <li><a href='pag=2'>2</a></li>
> <li><a href='pag=3'>3</a></li>
> </ul>
>
>
> <ul>
> <li>proyecto 1</li>
> <li>proyecto 2</li>
> <li>proyecto 3</li>
> <li>Proyecto 4</li>
> </ul>
> </div>
> </div>
>
>
> </body>
> </html>
--
Ram�n
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero a�n as� trabajando duro para Simplel�gica: apariencia,
experiencia y comunicaci�n en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
_______________________________________________
Lista de distribuci�n Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente direcci�n:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribuci�n Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente direcci�n:
http://ovillo.org/mailman/listinfo/ovillo
