Agrupamiento de selectores

ary_ · #1 (**permalink**) 06/12/2011, 13:42

KONICHIWA, soy nueva en el foro, tengo una duda con respecto a selectores de contexto y agrupamiento de los mismos, leyendo varias fuentes, encontre que los selectores de contexto son cadenas formadas por dos o más selectores simples, separados por un espacio en blanco.

ejemplo

h1 h2 h3 h4 h5 h6{
font-family:Arial,Verdana;
}

Agrupamiento de selectores
Usados para la disminución repetitiva de declaraciones dentro de selectores, tambien usado para la agrupación de cadenas de selectores para poder afectar a más elementos usando menos lienas, para ello el uso de comas.

ejemplo

#box, .box, ul li a, #box:hover, input[type ="text"]{
color:red;
}

Mi duda es la siguiente, ¿Es lo mismo el agrupamiento de selectores que selectores de contexto?, espero me puedan ayudar con mi duda.

ryugen · #2 (**permalink**) 06/12/2011, 13:53

no, no es los mismo

Suponiendo

Código CSS:

Ver originalbody{
color:black;
}

Entonces

Código CSS:

Ver originaldiv p {
    color:red
}

hace que el color de la letra de los "P" que sean hijos directos de algun "DIV" de la página
tegan color de texto rojo, en ese caso

Código HTML:

Ver original<body>
<span>Esto es negro</span>
<div> Esto es negro</div>
<p> Esto es negro</p>
<div><p>Esto es rojo</p></div>
</body>

Por otra parte

Código CSS:

Ver originaldiv, p {
  color:red
}

Esto hará que cualquier "DIV" o "P" tenga letra roja

Código HTML:

Ver original<body>
<span>Esto es negro</span>
<div> Esto es rojo</div>
<p> Esto es rojo</p>
<div><p>Esto es rojo</p></div>
</body>

ary_ · #3 (**permalink**) 06/12/2011, 14:15

Entonces en el agrupamiento de selectores, cuando los separo por una coma (,), ejemplo h1, h2 {color:red}, estoy indicando que tanto la etiqueta h1 como h2 seran afectadas por esta regla css teniendo un color rojo, sin embargo, si lo hago de esta otra forma, selector de contexto ejmplo h1 h2 {color: red}, estoy indicando que solamente esta regla afectara a la etiqueta h2 ya que es hijo directo de h1, es decir, en codigo html, h2 tiene que estar dentro de la etiqueta h1 para poder ser afectado por esta regla css.

ary_ · #4 (**permalink**) 06/12/2011, 14:36

Muchas gracias "ryugen" por aclararme mi duda !

pitufoweb · #5 (**permalink**) 06/12/2011, 20:39

Cita:

Iniciado por ary_

Entonces en el agrupamiento de selectores, cuando los separo por una coma (,), ejemplo h1, h2 {color:red}, estoy indicando que tanto la etiqueta h1 como h2 seran afectadas por esta regla css teniendo un color rojo, sin embargo, si lo hago de esta otra forma, selector de contexto ejmplo h1 h2 {color: red}, estoy indicando que solamente esta regla afectara a la etiqueta h2 ya que es hijo directo de h1, es decir, en codigo html, h2 tiene que estar dentro de la etiqueta h1 para poder ser afectado por esta regla css.

Ya tienes claro el funcionamiento de los selectores de grupo.

Sin embargo, estas mal informada sobre el funcionamiento de los selectores de "contexto".

Los selectores que tu llamas de "contexto", en realidad se llaman; selectores descendientes. Y este tipo de selectores, no solo aplica a los hijos directos, si no que a todos sus descendientes.

Ejemplo:

body p {} ;

Este selector no solo aplicara a los párrafos hijos directos del body, si no que a todos los párrafos de la pagina.

Saludos

emprear · #6 (**permalink**) 06/12/2011, 22:07

Cita:

Iniciado por ary_

Entonces en el agrupamiento de selectores, cuando los separo por una coma (,), ejemplo h1, h2 {color:red}, estoy indicando que tanto la etiqueta h1 como h2 seran afectadas por esta regla css teniendo un color rojo, sin embargo, si lo hago de esta otra forma, selector de contexto ejmplo h1 h2 {color: red}, estoy indicando que solamente esta regla afectara a la etiqueta h2 ya que es hijo directo de h1, es decir, en codigo html, h2 tiene que estar dentro de la etiqueta h1 para poder ser afectado por esta regla css.

No elegiste el mejor de los ejemplos, no podés poner un header dentro de otro

<h1>
<h2>xxx</h2>
</h1>

es un error

Saludos y bienvenida