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)