Necesito ayuda para identificar tipo de CSS en Codepen.io

[alejandrosu]

Buenas a todos compañeros. Desde hace unos añso me encuentro ejemplos de pens en codepen con CSS o HTML en formatos que no se como se llaman. Tras investigar varias veces a lo máximo que podido llegar es a pensar que se trata de SCSS y no se como "convertirlo" a CSS de una manera rápida. Os dejo un link del ejemplo:



Una vez hablando con un colega me dijo simplemente que codepen.io en su momento sacó un lenguaje propio para que tengas que pagar si quieres un código cómodo de usar pero estoy seguro de que no se trata de este.

Espero que me podáis ayudar. ¡Un saludo y gracias de antemano a todos!

 

[WiseGuy]

Desde mi punto de vista, no veo nada que no sea CSS puro y común. Solo que están usando ciertas técnicas.

- Selectores de atributos
- Combinadores
- Pseudo-clases
- Y alguna que otra cosa.

 

[alejandrosu]

Desde mi punto de vista, no veo nada que no sea CSS puro y común. Solo que están usando ciertas técnicas.

- Selectores de atributos
- Combinadores
- Pseudo-clases
- Y alguna que otra cosa.

¡Hola! Gracias por contestar entonces, ¿me podrías aclarar esto por favor?:

¿Para qué sirve el símbolo ^ delante del =?
[id^="spoiler"]

¿Para qué sirve el simbolo ~ en esta parte?
input[id^="spoiler"] ~ .spoiler {

Y por último, ¿por qué usan [ ] en vez de usar .id para los ID?

¡Muchas gracias por tu tiempo!

 

[Immoral Dev]

¡Hola! Gracias por contestar entonces, ¿me podrías aclarar esto por favor?:

¿Para qué sirve el símbolo ^ delante del =?
[id^="spoiler"]

¿Para qué sirve el simbolo ~ en esta parte?
input[id^="spoiler"] ~ .spoiler {

Y por último, ¿por qué usan [ ] en vez de usar .id para los ID?

¡Muchas gracias por tu tiempo!

Selectores avanzados de CSS - David Valverde Blog

Los selectores avanzados de CSS (selector de hijo, adyacentes, hermanos o de atributo) nos permiten reducir nuestras hojas de estilo.

www.davidvalverde.com

Ahi tienes las respuestas. Es solo el nivel intermedio de css.

 

[alejandrosu]

Selectores avanzados de CSS - David Valverde Blog

Los selectores avanzados de CSS (selector de hijo, adyacentes, hermanos o de atributo) nos permiten reducir nuestras hojas de estilo.

www.davidvalverde.com

Ahi tienes las respuestas. Es solo el nivel intermedio de css.

¡Muchas gracias por tu ayuda!