Preciso de ajuda para identificar tipo de CSS no Codepen.io

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!

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.

WiseGuy disse:

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.

Clique para expandir...

¡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!

alejandrosu disse:

¡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!

Clique para expandir...

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

LordHenry disse:

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.

Clique para expandir...

¡Muchas gracias por tu ayuda!