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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0a53027
Minor: updates specificity weights to reflect updated tutorial
estelle Jun 9, 2022
e17cebd
New File: layers, Modify: specificty values
estelle Jun 9, 2022
8b11c62
Apply suggestions from code review
estelle Jun 14, 2022
b0a8255
add layers to task
estelle Jun 14, 2022
5eae792
add layers to task
estelle Jun 14, 2022
ac1e457
Merge branch 'main' into cascade
estelle Jun 21, 2022
51ca338
typo
estelle Jun 22, 2022
fad24e6
Update learn/cascade/specificity-boxes.html
estelle Jun 22, 2022
005a46d
Apply suggestions from code review
estelle Jun 22, 2022
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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