Skip to content

Minor: updates specificity weights to reflect updated tutorial. Add cascade file #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jun 22, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 96 additions & 0 deletions learn/cascade/cascade-layers.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>cascade layers demo</title>
<link rel="stylesheet" href="../styles.css">
<style>

</style>

<style class="editable">
@layer firstLayer, secondLayer;

p { /* 0-0-1 */
background-color: red;
color: grey !important;
border: 5px inset purple;
margin: 15px;
}
p#addSpecificity { /* 1-0-1 */
border-style: solid !important;
}

@layer firstLayer {
#addSpecificity { /* 1-0-0 */
background-color: blue;
color: white !important;
border-width: 5px;
border-style: dashed !important;
}
}

@layer secondLayer {
p#addSpecificity { /* 1-0-1 */
background-color: green;
color: orange !important;
border-width: 10px;
border-style: dotted !important;
}
}

</style>
</head>

<body>
<section class="preview">
<p id="addSpecificity">
A paragraph with a border and background
</p>
</section>

<textarea class="playable playable-css" style="height: 280px;">
@layer firstLayer, secondLayer;

p { /* 0-0-1 */
background-color: red;
color: grey !important;
border: 5px inset purple;
}
p#addSpecificity { /* 1-0-1 */
border-style: solid !important;
}

@layer firstLayer {
#addSpecificity { /* 1-0-0 */
background-color: blue;
color: white !important;
border-width: 5px;
border-style: dashed !important;
}
}

@layer secondLayer {
p#addSpecificity { /* 1-0-1 */
background-color: green;
color: orange !important;
border-width: 10px;
border-style: dotted !important;
}
}
</textarea>

<textarea class="playable playable-html" style="height: 140px;">
<p id="addSpecificity">
A paragraph with a border and background
</p>
</textarea>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset">
</div>
</body>
<script src="../playable.js"></script>

</html>
28 changes: 14 additions & 14 deletions learn/cascade/specificity-boxes.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,37 @@
</style>

<style class="editable">
/* specificity: 0101 */
/* 1. specificity: 1-0-1 */
#outer a {
background-color: red;
}

/* specificity: 0201 */
/* 2. specificity: 2-0-1 */
#outer #inner a {
background-color: blue;
}

/* specificity: 0104 */
/* 3. specificity: 1-0-4 */
#outer div ul li a {
color: yellow;
}

/* specificity: 0113 */
/* 4. specificity: 1-1-3 */
#outer div ul .nav a {
color: white;
}

/* specificity: 0024 */
/* 5. specificity: 0-2-4 */
div div li:nth-child(2) a:hover {
border: 10px solid black;
}

/* specificity: 0023 */
/* 6. specificity: 0-2-3 */
div li:nth-child(2) a:hover {
border: 10px dashed black;
}

/* specificity: 0033 */
/* 7. specificity: 0-3-3 */
div div .nav:nth-child(2) a:hover {
border: 10px double black;
}
Expand Down Expand Up @@ -81,37 +81,37 @@

<textarea class="playable playable-css" style="height: 280px;">

/* specificity: 0101 */
/* 1. specificity: 1-0-1 */
#outer a {
background-color: red;
}

/* specificity: 0201 */
/* 2. specificity: 2-0-1 */
#outer #inner a {
background-color: blue;
}

/* specificity: 0104 */
/* 3. specificity: 1-0-4 */
#outer div ul li a {
color: yellow;
}

/* specificity: 0113 */
/* 4. specificity: 1-1-3 */
#outer div ul .nav a {
color: white;
}

/* specificity: 0024 */
/* 5. specificity: 0-2-4 */
div div li:nth-child(2) a:hover {
border: 10px solid black;
}

/* specificity: 0023 */
/* 6. specificity: 0-2-3 */
div li:nth-child(2) a:hover {
border: 10px dashed black;
}

/* specificity: 0033 */
/* 7. specificity: 0-3-3 */
div div .nav:nth-child(2) a:hover {
border: 10px double black;
}
Expand Down
57 changes: 38 additions & 19 deletions learn/tasks/cascade/cascade.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,25 @@
</style>

<style class="editable">
#outer div ul .nav a {
background-color: yellow;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
@layer yellow, purple, green;

div div li a {
color: rebeccapurple;
@layer yellow {
#outer div ul .nav a {
background-color: yellow;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
}
@layer purple {
div div li a {
color: rebeccapurple;
}
}
@layer green {
a {
color: lightgreen;
}
}
</style>
</head>
Expand All @@ -34,18 +44,27 @@
</div>
</div>
</section>
<textarea class="playable playable-css" style="height: 400px;">
@layer yellow, purple, green;

<textarea class="playable playable-css" style="height: 250px;">
#outer div ul .nav a {
background-color: yellow;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}

div div li a {
color: rebeccapurple;
}
@layer yellow {
#outer div ul .nav a {
background-color: yellow;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
}
@layer purple {
div div li a {
color: rebeccapurple;
}
}
@layer green {
a {
color: lightgreen;
}
}
</textarea>

<textarea class="playable playable-html" style="height: 170px;">
Expand Down