seleccionando elementos

[Nateskin]

hola a todos!!

la verdad que llevo tiempo diseñando webs pero hasta ahora no me ha surgido una duda.

Estoy intentando elegir que el primer P dentro de una capa sea de un color diferente.

llevo un buen rato pero no lo consigo, aqui va el codigo:

Código:

<div id="father">
  <h3 class="title">title of content</h3>
  <ul class="options">
    <li><a href="#option-1" title="option 1" target="_self">option 1</a></li>
    <li><a href="#option-2" title="option 2" target="_self">option 2</a></li>
  </ul>
  <div class="clear"></div>
  <p>Aenean massa enim, placerat at malesuada in, feugiat ac augue. Mauris quis augue eget quam iaculis feugiat in sit amet quam. Proin iaculis rutrum iaculis. Praesent tincidunt tempor facilisis. Proin adipiscing convallis ipsum. Fusce tincidunt ornare tellus, at congue sem laoreet et. Quisque tempor rutrum diam, sed ornare quam cursus luctus. Phasellus et purus nec nunc dignissim fermentum sed sit amet arcu. Praesent arcu nisl, eleifend non adipiscing vel, faucibus ac ante. Quisque nisl arcu, pulvinar sit amet congue quis, aliquet in lorem. Sed et nibh non libero fermentum suscipit et at diam. Etiam neque dui, porttitor quis convallis ac, venenatis a nunc. Etiam ipsum dui, malesuada venenatis convallis sed, posuere quis odio. In ut purus non magna egestas ultrices. Aliquam fringilla consectetur dolor vel varius. Nunc non enim orci. Pellentesque facilisis, leo eget gravida luctus, neque sapien iaculis erat, ut cursus nisi est ac erat. Fusce egestas placerat justo sagittis elementum.</p>
  <p>Sed fringilla, enim in imperdiet posuere, nisi leo imperdiet enim, non tempor magna enim sed arcu. Praesent consectetur ipsum nec leo aliquam quis viverra urna accumsan. Nam et quam tellus. Nam posuere enim eu nibh lacinia sodales. Integer quis justo suscipit odio pretium ornare. Cras mollis justo non dui tempus semper. Etiam condimentum, dui sed feugiat pellentesque, nunc lorem convallis odio, quis congue libero elit non metus. Nam nunc sapien, tempus sit amet laoreet ac, pretium tristique neque. Mauris convallis laoreet nunc. Nulla lectus tellus, malesuada nec vulputate eget, lobortis quis diam.</p>
  <p>Nam vitae volutpat tellus. Mauris lobortis, lacus et consequat blandit, risus eros ultrices est, quis convallis quam augue a mi. Cras fringilla nunc nec nisl aliquet aliquet. Suspendisse eros nunc, faucibus vel venenatis in, pharetra sit amet risus. Integer metus quam, faucibus molestie tristique a, tristique eu eros. In eros sem, porttitor quis ultrices sit amet, posuere vitae lectus. Sed in felis justo, ultrices elementum lorem. Pellentesque gravida vestibulum justo cursus aliquet. Nam vitae nisl erat, sit amet lacinia metus. Cras interdum rhoncus dapibus. Morbi non dui est. Sed in commodo lectus. Cras luctus urna a tellus volutpat egestas. Sed ut leo urna. Vestibulum non enim ante, vel tincidunt mauris. </p>
  </div>

viendo documentaciones veo que esta la siguiente opcion: p:first-child, pero por mucho que lo declaro y le pongo un color diferente, no funciona.

lo puse así:

Código:

#father p:first-child {
color:blue;
}

pero no funciona

¿alguna ayudita al respecto?

gracias

[Calizman]

Saludos!

Y si creas un estilo para esa <p>? Quedaria algo asi:

Código HTML:

<div class="clear"></div>
<p class="primero">Aenean massa enim, placerat at malesuada in, feugiat ac augue. Mauris quis augue</p>
<p>Sed fringilla, enim in imperdiet posuere, nisi leo imperdiet enim, non tempor magna</p>
<p>Sed fringilla, enim in imperdiet posuere, nisi leo imperdiet enim, non tempor magna</p>
 </div>
 

Código CSS:

.primero {
color: blue;
}
 

Eso siempre funciona...

Hata Luego!

[Nateskin]

Iniciado por CaLiZzZ

Saludos!

Y si creas un estilo para esa <p>? Quedaria algo asi:

Código HTML:

<div class="clear"></div>
<p class="primero">Aenean massa enim, placerat at malesuada in, feugiat ac augue. Mauris quis augue</p>
<p>Sed fringilla, enim in imperdiet posuere, nisi leo imperdiet enim, non tempor magna</p>
<p>Sed fringilla, enim in imperdiet posuere, nisi leo imperdiet enim, non tempor magna</p>
 </div>
 

Código CSS:

.primero {
color: blue;
}
 

Eso siempre funciona...

Hata Luego!

Siempre es una opcion, pero yo lo hacia porque queria hacer un experimento con mootools para que me pusiera las etiquetas segun mis indicaciones.

[kseso?]

Si no fuese por ie6 (como no podría ser de otra manera), se me ocurre que podrías elegir entre varias formas:
Uso de pseudoclases como ":nth-child()"
o utilizar alguno de los selectores 'avanzados' "~" o "+"

Puedes ver más información al respecto aquí

Un saludo

[Mikmoro]

Iniciado por Nateskin

Siempre es una opcion, pero yo lo hacia porque queria hacer un experimento con mootools para que me pusiera las etiquetas segun mis indicaciones.

Pues si usas mootools, yo seguiría por el camino de javascript para seleccionar el primer elemento P.

Si no, puedes probar con esto:

.clear + p {
color:blue;
}

(obviando a IE6, claro).

[Calizman]

Al final de cuentas... sin complicarte la vida y aceptando la facilidad de la misma... Utiliza una clase no?