A Pen by Andrew Kirchmyer.

css-styling-based-on-sibling-count.markdown

css styling based on sibling count

A Pen by Andrew Kirchmyer on CodePen.

License.

index.html

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

style.css

body {
    background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}

ul li {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 10px;
    position: relative;
    
}