Skip to content

Instantly share code, notes, and snippets.

@wilsolutions
Created Mar 10, 2017
Embed
What would you like to do?
/* Style the elements (nothing interesting here) */
p{
font-size: 16px;
width: 420px;
margin: 20px auto 0;
text-align:center;
}
.container{
width: 420px;
margin:50px auto 0;
overflow: hidden;
padding:5px;
}
.elem{
width:30px;
height:30px;
margin:4px;
background-color:#A0DFAC;
float:left;
}
.elem span{
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:2px solid #fff;
}
/* Selectors for matching the first letter and line: */
p::first-letter{
background-color: #666;
color: #FFF;
font-size: 24px;
font-style:normal;
display: inline-block;
padding: 0 5px;
border-radius: 3px;
margin-right: 2px;
font-family: serif;
}
p::first-line{
font-size: 18px;
text-transform: smallcaps;
font-style: italic;
text-decoration: underline;
}
/* Make the first and last elements purple */
.elem:first-child,
.elem:last-child{
background-color:#948bd8;
}
/* Make every other element rounded */
.elem:nth-child(odd){
border-radius:50%;
}
/* Make the sixth element red */
.elem:nth-child(6){
background-color:#cb6364;
}
/* Style the element which contains the span */
.elem:not(:empty){
background-color:#444;
position:relative;
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}
/* Target elements by attribute */
.elem[data-foo=bar1]{
background-color:#aaa;
}
.elem[data-foo=bar2]{
background-color:#d7cb89;
}
/* The attribute value should start with bar. This matches both
of the above elements */
.elem[data-foo^=bar]{
width: 16px;
height: 16px;
margin: 11px;
}
/* The element that follows after the one with data-foo="bar2" attribute */
.elem[data-foo=bar2] + .elem{
background-color:#78ccd2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment