Autor Tema: CSS: No me funcionan selectores por id y por class restringidos (Leído 2109 veces)

Che Guevara · « **en:** 31 de Diciembre 2015, 20:41 »

Hola gente, este es mi primer posteo y espero que sea el lugar apropiado a mi consulta.
Tengo el problema que, haciendo ya casi todo el curso CSS, me encuentro con un problema que me parece algo basico a esta altura y no lo estoy pudiendo resolver ni entender que está mal.
El tema es que estoy probando usar selectores por id y por class restringidos y de la forma "que esten dentro de", y no me funcionan.
En específico, los selectores que no logro hacer que funcionen son:
---> p#ojiva div{color: orange;}
---> p.tomate p{color: brown;}

Dejo el codigo abajo...

Código: [Seleccionar]

<html>
	<head>
		<meta charset='utf-8'>
		<meta name='hola' description='mamasa'>
		<title>Hola</title>
		<style type='text/css'>
			#ojiva{color: pink;}
			#ojiva div{color: red;}
			p#ojiva div{color: orange;}
			p.tomate{color: yellow;}
			p.tomate p{color: brown;}
		</style>
	</head>
	<body>
		<div id='ojiva'>
			Rosa
			<div>
				Rojo
			</div>
		</div>
		<p id='ojiva'>
			<div>
				Verde
			</div>
		</p>
		<br>
		<p class='tomate'>
			Amarillo
			<p>
				Marrón
			</p>
		</p>
		
	</body>
</html>

Desde ya agradezco cualquier tipo de ayuda que me puedan dar.
Feliz año!

Ogramar · « **Respuesta #1 en:** 03 de Enero 2016, 14:21 »

Buenas Che Guevara tienes que tener cuidado con los espacios, para hacer un selector de varios elementos tienes que pensar cuándo es necesario dejar un espacio entre ellos por ejemplo no es lo mismo escribir p.ojiva div{color: orange;} que p .ojiva div{color: orange;}

También tienes que tener cuidado con cómo se leen los selectores no es lo mismo p .ojiva que .ojiva p

Ejemplos:

p.destacado significa "párrafos cuyo atributo class sea destacado"

p.destacado a significa "links dentro de párrafos cuyo atributo class sea destacado"

p .destacado significa "elementos con atributo class destacado dentro de párrafos" (la diferencia con el anterior está en que aquí hemos dejado un espacio entre medio)

Otra cosa a tener en cuenta: los ids se supone que son únicos dentro de un documento, tienes el html mal escrito. Fíjate que has escrito

<div id='ojiva'>
...
<p id='ojiva'>

Esto no es válido, un id tiene que ser único, no puedes tener el mismo id repetido dos o más veces. Si quieres aplicar los mismos estilos más de una vez debes usar class en lugar de id.

En este curso tienes explicados todos los conceptos y ejemplos http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: