CSS para pestañas

Hola!

Encontre este aporte:

http://css-tricks.com/functional-css-tabs-revisited/


Necesito explicación sobre esta parte:

CSS

[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Especificamente:
¿Que es eso de encerrar con corchetes en CSS, que estan haciendo esas viboritas en el aire y esos zindex?

Hola:

Analizando la primera regla :checked ~ label te puedo decir lo siguiente:

involucrará a todos los elementos que contengan un atributo type cuyo valor sea radio. En este caso (creo que no existe otro) se refiere a <input type="radio" ... />. También se podría seleccionar etiquetas en base a otros atributos. Por ejemplo, para seleccionar etiquetas en base al atributo title, se podría hacer así: img, lo que seleccionaría todas las etiquetas img cuyo atributo title sea El lobo.

Luego está una pseudo-clase :checked (existen varias). Esta pseudo-clase, al ser utilizada, en este caso, con los input cuyo type sea radio, aplicará los estilos a todos los radio buttons que estén activos (o marcados). Si hay más de uno, solo se aplicará al seleccionado.

Lo siguiente es el símbolo (~) (que en inglés le dicen tilde). Este símbolo es un selector de hermanos y lo que hace es seleccionar todos las etiquetas hermanas al selector especificado excluyéndolo de la selección. En otras palabras, lo que dice es: selecciona todos las etiquetas label hermanas de los radio buttons que estén seleccionados y aplica los estos estilos.

Los hermanos son aquellos elementos que están envueltos por una misma etiqueta. Por ejemplo:

<div id="padre">
  <div id="hijo"></div><!-- hermano -->
  <div id="hijo1"></div><!-- hermano -->
  <div id="hijo2"></div><!-- hermano -->
  <div id="div1"></div><!-- hermano -->
  <div id="div2"></div><!-- hermano -->
</div>

Creo que eso lo deja claro: todas las divs dentro de la div "padre" son hermanos entre sí, incluso si no comparten la class, id u otro atributo. Y ahora una regla de ejemplo:

div { width: 10px; height: 10px; border: 1px solid grey; margin: 16px 0; }
div#hijo ~ div { background: green; }

Eso dejaría de color verde a todas las divs dentro de padre excepto a la div de id hijo. Pruébalo aquí.

Saludos.

Tantas gracias porque me terminaste de fijar la idea. Muuuuuuuuuuuuchas gracias. Dejo esto que me repondio Rampaign en forosdelweb.com que se zarpo en capo tambien:


Los corchetes y las "viboritas" son selectores, tal como lo es el "#" para id's y el "." para clases, solo que estos selectores pertenecen a la especificacion CSS3.


Los corchetes se usan para seleccionar atributos, por ejemplo:

{}, con esto seleccionas todos los elementos que tengan el atributo "type" y que éste sea igual a "radio".


La "viborita" selecciona elementos con el mismo padre, y que respeten el orden del selector, es un selector de hermanos, por ejemplo:
:checked ~ label {}, selecciona todos los elementos "label" que sean hermanos de un elemento con "type" igual a "radio" seleccionado y que ademas, se cumpla que el label esta despues del radio button, lo particular de este selector es que los elementos no tienen que estar exactamente juntos, puede haber otro elemento entre ellos, y aun asi funcionaran.


En cuanto al aporte de las pestañas, cada una de las pestañas tiene la siguiente estructura html:

<div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           stuff
       </div>
   </div> 

El modo de reconocer qué pestaña ha sido seleccionada es precisamente por el radio button, que va a tener el atributo "checked", aqui entran los selectores:

[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}

Estos son los estilos para el label que sea hermano de un radio button seleccionado, este label es el texto de la "pestaña activa". El funcionamiento es simple: se aplica este estilo al label hermano del radio button seleccionado, con esto, se selecciona solo el label correspondiente a la pestaña actual.

[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Este es el estilo para el contenido hermano del radio button seleccionado, al darle "z-index: 1" este contenido estara encima de todos los contenidos de las pestañas y por ello sera el que se vea. El funcionamiento es como el del label, se selecciona el contenido correspondiente al radio button seleccionado.

En resumen, el truco aquí al usar el selector de la forma "a ~ b" es que te permite utilizar los elementos correctos segun la pestaña seleccionada (radio button clickeado).

Espero que te haya servido de algo mi explicacion, te dejo un par de links sobre los selectores. Como informacion adicional, el selector de atributos "[]" tiene usos mas avanzados, como por ejemplo, seleccionar un atributo que en lugar de ser exactamente igual a algun valor, empiece con ese valor, o termine exactamente con ese valor:
E[foo^="bar"], elemento E, cuyo atributo "foo", empieza con el texto "bar"
E[foo$="bar"], elemento E, cuyo atributo "foo", termina con el texto "bar"

http://reference.sitepoint.com/css/generalsiblingselector
http://www.w3.org/TR/selectors/#general-sibling-combinators


Saludos

A mi me costó un poco encontrar lo que significaba la "viborita" (el tilde de la letra eñe), pero fue entretenido aprender algo nuevo, así que gracias a ti también :D.