Nth-of-type funciona raro

[mumraa]

Hola a todos,
estoy intentando armar una seccion para mensajes con varias columnas (2 ul).

Código:

<ul class="lista listado-mensajes">
	<li>
		<ul class="labels">
			<li>Fecha<li>
			<li>Asunto del mensaje<li>
			<li>Remitente<li>
			<li>Acciones<li>
		</ul>
	</li>
</ul>

las anteriores que he armado con nth-of-type para determinar el ancho segun el orden funciono perfectamente.
Pero no se porque en esta no funciona el orden.
Entonces para poder darles el ancho segun la columna, he tenido que hacer:
nth-of-type(1, 3, 5, 7) separados claro esta
en vez de nth-of-type(1, 2, 3, 4)

porque no me deja usar los numeros en sucesion si son solo 4.. que elementos esta tomando en cuenta para que solo responda si uso 1,3,5,7??

cualquier ayuda se las agradezco ya que estoy hace rato dando vueltas a esto y no encuentro logica (ni probando con nth-child)

saludos!!

[VityOsma]

Has probado a utilizar nth-of-type(2n+1), así se aplicarán los estilos a los hermanos Nº 1, 3, 5 y 7. ¿Eso es lo que quieres hacer no?
O utiliza
li------------------------Se aplica a todos
li + li -------------------A todos menos el primero
li +li +li-----------------A los dos últimos
li + li +li +li ------------Al último
Vamos que cada uno se aplicará a uno de los list items.

[pzin]

También puedes probar con:

Código CSS:

:nth-child(odd)
 

para seleccionar hijos impares. Para pares sería even.

De todas formas sino publicas cómo tienes tus selectores cómo los tienes entonces no se podrá ver si cometes algún fallo, que usando esa pseudo-clase y con elementos que se repiten en varios niveles suelen haber confusiones.

[mumraa]

Esa es toda la estructura.
Pero no quiero formulas para nth-of-type sino entender porque apunta a 1,3,5,7 cuando en realidad son solo 4 elementos en la ul.. Osea primero, segundo, tercero y cuarto..

Sino termino teniendo que adivinar la posición, como en este caso saque que era por impares

[pzin]

Ah ¿que estás intentando hacer nth-of-type(1,2,3,4)?

Eso no va a funcionar, porque no existe. Se aceptan las siguientes fórmulas:

• n
• odd/even
• an+b

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

[mumraa]

Les agradezco, pero no me sirve su ayuda porque no me estan leyendo bien..
No quiero formulas, solo entender porque si tengo 4 li no puedo apuntarlos como:
nth-of-type(1), nth-of-type(2),..., nth-of-type(4)
Sino que el 2do viene a ser el 3, el 3ero el 5 y el 4to el 7

solo quiero entender porque el orden esta modificado..

[pzin]

Ya te dije que sino pones el código de cómo tienes tu selector, pues tampoco podemos adivinar.

[mumraa]

Si pzin, sabia pero no podia pasarlo antes y no queria que gastaran energias en algo que no estaba necesitando...

esto es lo que tengo en css:

Código:

/***************************************************************/
/***************************************************************/
ul.labels {
	font-weight: bold;
	border-bottom: 1px solid #dedede;
	margin-bottom: 10px;
	padding-bottom: 10px;

}


ul.lista, ul.lista ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

ul.lista > li, ul.lista ul {
	width: 100%;
	height: 30px;
	line-height: 30px;
	margin-bottom: 0;
}

ul.lista > li:first-child {
	}

ul.lista li ul li {
	border-bottom: 0 !important;
	margin-bottom: 0 !important;
	float: left;
	display: block;
	height; 30px;
	line-height: 30px;
}
/************************/
.listado-mensajes > li > ul > li:nth-of-type(1) {
	width: 10% !important;
}
.listado-mensajes > li > ul > li:nth-of-type(2) {
	width: 50% !important;
}
.listado-mensajes > li > ul > li:nth-of-type(3) {
	width: 25% !important;
}
.listado-mensajes > li > ul > li:nth-of-type(4) {
	width: 15% !important;
	text-align: right;
}
/************************/

y al comienzo del post, lo que vendria a hacer el listado de mensajes...

espero se entienda ahora

[pzin]

HTML5 tiene la particularidad de que existen elemento que no hacen falta cerrar, como por ejemplo los elementos de una lista, luego un código así es válido:

Código HTML:

<li>un
<li>dos
<li>tres
<li>cuatro
 

Entonces si haces esto:

Código HTML:

<li>un<li>
<li>dos<li>
<li>tres<li>
<li>cuatro<li>
 

Tienes ocho elementos, porque no los estás cerrando, sino creando otro (no son etiquetas de cierre vaya) y te pasa lo que te pasa.

[mumraa]

estas absolutamente en lo cierto viejo..
estuve tan embebido que no me di cuenta de la falta de "/" en los cierres.. probare a la vuelta a casa

mil gracias!