CSS nested selectors

dabblet.css

/**
 * CSS nested selectors
 */

body {
  font-family: Arial, verdana, sans-serif;
  font-size: 20px;
  color: black;
}
.content .rot {
  color: #ff0000;
}

.link-with-icon-wrapper {
  width: 200px;
}

.link-with-icon {
  display: block;
  text-align: center;
  text-decoration: none;
}

.link-with-icon:after {
  content: '↓';
  display: block;
}

dabblet.html

<div class="content">
  <p>Dieser Text ist schwarz!</p>
  <p class="rot">Dieser Text ist rot!</p>
  <p class="link-with-icon-wrapper"><a class="link-with-icon" href="#">Mein Link</a></p>
</div>
<p class="rot">Dieser Text ist schwarz, auch wenn er die Klasse "rot" hat.</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}