DEV Community

Nguyen Tran Chau Giang
Nguyen Tran Chau Giang

Posted on

Day 01 - 100 days of CSS battle

#cssbattle #100daysofcode

Play the challenge

My solution

100% match, 118 characters

<p><style>*{background:var(--m,#588A95);*{width:140;height:140;margin:20%auto;--m:#222;*{--m:#fff;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

My score

Explanation: 

<style> * { background: var(--m, #588A95); * { width: 140px; height: 140px; margin: 20% auto; --m: #222; * { --m: #fff; transform: skew(45deg); } } } </style> <p></p>
Enter fullscreen mode Exit fullscreen mode

Syntax Overview

The syntax:

* { * { * { } } }
Enter fullscreen mode Exit fullscreen mode

is called CSS nesting

Understanding Nested CSS Example

In this case, it is the same as:

html {} body {} p {}
Enter fullscreen mode Exit fullscreen mode

Instead of writing:

html { background-color: var(--m, #588A95); } body { width: 140px; height: 140px; margin: 20% auto; background-color: var(--m, #222); }
Enter fullscreen mode Exit fullscreen mode

Since they share the same background-color property, we can do something like:

html { background-color: var(--m, #588A95); body { width: 140px; height: 140px; margin: 20% auto; --m: #222; } }
Enter fullscreen mode Exit fullscreen mode

Here, the body element inherits the background-color from html, but it can also define its own background color value (#222).

Step-by-Step Breakdown

1. First Level 

* { background-color: var(--m, #588A95); }
Enter fullscreen mode Exit fullscreen mode

  • The * selector here matches the html, body and p element.

  • This styles the html, body, and pelements with a background color set to the variable --m, or #588A95 if --m is not defined.

2. Second Level 

* { width: 140px; height: 140px; margin: 20% auto; --m: #222; }
Enter fullscreen mode Exit fullscreen mode

At this level:

  • The * selector here matches the body and p element.

  • The width and height of body and p are set to 140px.

  • The elements are centered horizontally with margin: 20% auto.

  • The variable --m is now defined as #222, which will be used as the background color for these elements.

3. Third Level 

* { --m: #fff; transform: skew(45deg); }
Enter fullscreen mode Exit fullscreen mode

Finally:

  • The * selector here matches the p element.

The --m variable is updated to #fff, so the p element now has a white background.

The element is also transformed with a 45-degree skew.

✅ Summary:
This nested structure allows each level of the cascade (html → body → p) to inherit and override the CSS variable --m, resulting in a layered color change and transformation effect.

Top 10 solutions (maximum 110 characters):

1. Ilya Streltsyn 

<style>*{background:#588A95;color:#222;outline:solid 75q;margin:37.5%50%;*{color:fff;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

2. emohdaziz 

<stYle>&{background:#222;border:138Q solid#588a95;scale:1 3.5;*{background:#fff;margin:0;transform:skew(74deg
Enter fullscreen mode Exit fullscreen mode

3. Mister Magoo 

<p><style>*{background:var(--b,#588A95)}&>*{margin:80 130;--b:#222}p{--b:#fff;height:140;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

4. Seth Kuhn 

<style>&{border:138q solid#588A95;background:#222;margin:-50 0;*{background:#fff;margin:0;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

5. Ludvig 

<STYLE>&{background:#222;margin:-50 0;border:138q solid#588A95;*{background:#FFF;margin:0;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

6. H_Bliertz 

<p><stylE>&{margin:142 192;*{background:#588A95;outline:solid 75q;color:#222;*{color:#FFF;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

7. Martijn 

<style>&{background:#222;border:138q solid#588A95;margin:-50 0;*{background:#fff;margin:0;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

8. David Eguiluz 

<style>&{background:#222;border:138q solid#588a95;margin:-50 0;*{background:#fff;margin:0;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

9. Kieron 

<style>&{margin:-58-8;background:#222;border:46vh solid#588a95;*{margin:0;background:#fff;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

10. Sascha Adams 

<stYle>&{background:#222;border:138q solid#588A95;margin:-50 0;*{margin:0;background:#fff;transform:skew(45deg
Enter fullscreen mode Exit fullscreen mode

Top comments (0)