Reglas básicas?

charl1 #1 Jul '14

Buenas, realmente no se que título ponerle a esta duda que es más que posible que sea básica, pero no la acabo de encontrar en san google.

CSS

p a { color: red; }
  p > a { color: orange; }

HTML

<p>
    <a href="#">Enlace1</a>
  </p>

  <p>
    <span>
      <a href="#">Enlace2</a>
    </span>
  </p>

  <p>
    <b>
      <span>
        <a href="#">Enlace3</a>
      </span>
    </b>
  </p>

  <p>
    <div>
      <span>
        <a href="#">Enlace4</a>
      </span>
    </div>
  </p>

Output

Enlace1 // Naranja

Enlace2 // Rojo

Enlace3 // Rojo ( con negrita ) 

Enlace4 // Color de link, predeterminado azul

La pregunta es porque el último enlace no se ve rojo, la respuesta creo que va por la importancia de los selectores p y div pero no encuentro o no se me ocurre que buscar.

edit: me he levantado iluminado y muy espeso xD, para preguntar esto..

Alv15 #2 Jul '14

#1 Es por el <div> que tienes ahí. Si lo quitas el enlace se ve de color rojo. Si no sabes manejarte bien con los selectores ponle a cada <a> un class y así no te complicas tanto.

1 1 respuesta

charl1 #3 Jul '14

#2 Se que es por el <div>, lo puse a propósito, quizás pregunté mal. Esto es un invento para curiosear, lo que me pregunto es que tiene el <div> que hace que formatee el estilo.

No se como buscar ésta información. Sigo buscando pero pregunté aquí mientras no lo encuentre.

2 respuestas

0buS #4 Jul '14

#3 Por que el div tienes que sacarlo del <p>. Si no dentro del propio div no hay formato para <p>.

yarviT0 #5 Jul '14

#3 para buscar pon en google css selector, la respuesta sería:

p > a los enlaces cuyo padre es un párrafo, en el caso que note sale el padre es un div no un parrafo por ello no pilla el css.
http://www.w3schools.com/cssref/css_selectors.asp

1 respuesta

charl1 #6 Jul '14

#5 Si te fijas tengo el color rojo para todos los "a" contenidos en "p". Al meter un div de por medio no realiza el formato, porque? Porque no se puede meter dentro de un <p> un <div> ? intuyo que si pero quiero leerlo en algun sitio xD.

edit: hilo low level del dia..

edit2: Lo encontré..

El elemento P no puede contener elementos en bloque (incluyendo a otros P).

1 respuesta

Camperito #7 Jul '14

Seria mas apropiado Reglas basicas de Maquetacion , mas que de diseño

yarviT0 #8 Jul '14

#6 uhm gracias por la respuesta, aunque la verdad si pones div a {color:red;} ya lo tendrías cubierto, aun así como dicen yo soy mas de poner class en todos los sitios xD

DarkSoldier #9 Jul '14

te recomiendo hacer esto: http://flukeout.github.io/

1 respuesta

charl1 #10 Jul '14

#9 Muy interesante.

Reglas básicas?

Usuarios habituales

Tags