Skip to content

Commit 359b783

Browse files
author
Pickra
committed
Nesting and the parent selector
1 parent 72b7e41 commit 359b783

File tree

6 files changed

+48
-9
lines changed

6 files changed

+48
-9
lines changed

index.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,17 @@
66
<link rel="stylesheet" href="css/main.css">
77
</head>
88
<body>
9-
<h1 class="blue">SassyEgghead</h1>
9+
<div class="spiderman-container">
10+
<div class="spiderman">
11+
<img src="http://www.clipartkid.com/images/773/spiders-men-clipart-clip-art-cakes-toppers-superhero-parties-1nw4sv-clipart.jpg" height="350" />
12+
<div class="description">
13+
<div class="header">
14+
Spider-man
15+
<a class="description-link" href=https://en.wikipedia.org/wiki/Spider-Man">stuff </a>
16+
MOOOOOOOOAAAR!!!
17+
</div>
18+
</div>
19+
</div>
20+
</div>
1021
</body>
1122
</html>

scss/main.scss

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1 @@
1-
@import "../css/other.css";
2-
3-
.red { color: red; }
4-
.red-dark { color: darken(red, 20%); }
5-
6-
@import "partial-b";
7-
@import "partial-a";
8-
@import "partial-c";
1+
@import "nesting/nesting";

scss/nesting/_nesting.scss

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.spiderman {
2+
padding: 1rem 2rem;
3+
transition: transform .8s ease-in-out;
4+
5+
&-container:hover & { transform: rotate(180deg); }
6+
&-container { background-color: #dbbebe; }
7+
8+
&::before {
9+
display: block;
10+
content: url('http://gallery1.anivide.com/_full/80728_1442526786.gif');
11+
}
12+
13+
img {
14+
transition: transform .8s ease-in-out;
15+
&:hover { transform: rotate(360deg); }
16+
}
17+
18+
.description {
19+
color: darkred;
20+
text-align: center;
21+
margin-top: 1rem;
22+
23+
.header { font-size: 2rem; }
24+
}
25+
26+
.description-link {
27+
text-decoration: none;
28+
29+
&::after {
30+
content: url('https://65.media.tumblr.com/avatar_a96a78c3d6ad_128.png');
31+
display: inline-block;
32+
vertical-align: middle;
33+
}
34+
}
35+
}
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)