Cita:
Iniciado por Virtualforos 
Hola!
Encontre este aporte:
http://css-tricks.com/functional-css-tabs-revisited/
Necesito explicación sobre esta parte:
CSS
Código:
[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?
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:
[type=radio] {}, 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:
[type=radio]: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:
Código 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:
Código:
[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.
Código:
[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