Specificity
section p {
color: red;
}
.p1 {
color: green;
}
<section class="section" id="section">
<h1>Title</h1>
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
</section>
๐ก The specificity of section p is 0.0.0.0.2 and .p1 is 0.0.0.1.0
.section p {
color: red;
}
.p1 {
color: green;
}
<section class="section" id="section">
<h1>Title</h1>
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
</section>
๐ก The specificity of .section1 p is 0.0.0.1.1 and .p1 is 0.0.0.1.0
#section {
color: red;
}
.p1 {
color: green;
}
<section class="section" id="section">
<h1>Title</h1>
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
</section>
๐ก p would inherit its parent's color only if there is no color applied directly to paragraphs
#section * {
color: red;
}
.p1 {
color: green;
}
<section class="section" id="section">
<h1>Title</h1>
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
</section>
๐ก The specificity of #section1 * is 0.0.1.0.0 and .p1 is 0.0.0.1.0
section * {
color: red;
}
p {
color: green;
}
<section class="section" id="section">
<h1>Title</h1>
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
</section>
๐ก The specificity of section * is 0.0.0.0.1. The specificity of p is also 0.0.0.0.1 but it comes later in the stylesheet.
section .p1 {
color: red;
}
section :nth-child(2) {
color: green;
}
<section class="section" id="section">
<h1>Title</h1>
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
</section>
๐ก The specificity of section .p1 is 0.0.0.1.1. The specificity of section :nth-child(2) is also 0.0.0.1.1 but it comes later in the stylesheet.
section > p {
color: red;
}
section p {
color: green;
}
<section class="section" id="section">
<h1>Title</h1>
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
</section>
๐ก The specificity of section > p is 0.0.0.0.2. The specificity of section p is also 0.0.0.0.2 but it comes later in the stylesheet.
.red {
color: red;
}
.green {
color: green;
}
<section class="section" id="section">
<p class="red green">Paragraph</p>
</section>
๐ก The specificity of .red is 0.0.0.1.0. The specificity of .green is also 0.0.0.1.0 but it comes later in the stylesheet.
The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declarationโs precedence as determined below, and outputs a single cascaded value.
The last declaration in document order wins.
body { ... }
body div.content div.container { ... }
body div.content div.container div.articles { ... }
body div.content div.container div.articles > div.post { ... }
body div.content div.container div.articles > div.post div.title { ... }
body div.content div.container div.articles > div.post div.title h1 { ... }
body div.content div.container div.articles > div.post div.content { ... }
ยซะ ะฟะพะธัะบะฐั ะกัะธะปะตะฒะพะณะพ ะัะฐะฐะปัยป โ ะัััั ะะตะฝะถะฐะตะฒ
.Block { background-color: plum; } // declare css
import styles from "./styles.module.css" // import a css module
function Block() { // apply the class name
return <div class={styles.Block}>Component</div>
}
<div class="Block-9gbnd5">Component</div>// result
import styled from "styled-components"
let Block = styled.div`
background-color: plum;
`
function Component() {
return <Block>Component</Block>
}
<div class="Block-9gbnd5">Component</div>// result
import styled, { css } from "styled-components"
let Button = styled.button`
background: black;
color: white;
${props => props.primary && css`
background: white;
color: black;
`}
`
:root {
--bg-color: plum; // declare a custom variable
--base-padding: 0.5rem;
}
.Component {
background-color: var(--bg-color); // use the custom variable
padding: calc(2 * var(--base-padding));
}
let element = document.querySelector("#element")
let styles = getComputedStyle(element)
let size = +styles.getPropertyValue("--base-size")
element.style.setProperty("--base-size", size + 4)
<div class="container">
<div class="item">First</div>
<div class="item">Second</div>
<div class="item">Third</div>
<div class="item">Fourth</div>
</div>
.container {
display: flex;
}
.container {
display: flex;
flex-direction: row-reverse;
}
.container {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-direction: column-reverse;
}
.container {
display: flex;
justify-content: flex-start;
}
.container {
display: flex;
justify-content: center;
}
.container {
display: flex;
justify-content: flex-end;
}
.container {
display: flex;
justify-content: space-between;
}
.container {
display: flex;
justify-content: space-around;
}
.container {
display: flex;
justify-content: space-evenly;
}
.container {
display: flex;
align-items: stretch;
}
.container {
display: flex;
align-items: flex-start;
}
.container {
display: flex;
align-items: center;
}
.container {
display: flex;
align-items: flex-end;
}
.container {
display: flex;
align-items: center;
}
.item:nth-child(1) {
align-self: flex-start;
}
.item:nth-child(4) {
align-self: flex-end;
}
.item {
order: 1;
}
.item:nth-child(1) {
order: 2;
}
.item:nth-child(4) {
order: -1;
}
.container {
display: flex;
}
.item {
flex-grow: 0; /* By default */
flex-grow: 1;
}
.container {
display: flex;
}
.item {
flex-grow: 1;
}
.item:nth-child(1) {
flex-grow: 3;
}
.container {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.container {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
align-content: center;
}
<div class="container">
<div class="item">First</div>
<div class="item">Second</div>
<div class="item">Third</div>
</div>
.container {
display: grid;
gap: 0.5rem; /* row-gap column-gap */
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.container {
display: grid;
grid-template-rows: 1fr 1.5fr 2fr;
}
.container {
display: grid;
grid-template-rows: 1fr 1.5fr;
grid-template-columns: 1fr 2fr 1fr;
}
.container {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: 1fr 1fr;
}
.item:nth-child(1) {
grid-row: 1 / 3; /* grid-row-start / grid-row-end */
grid-column: span 2; /* grid-column-start / grid-column-end */
}
.container {
display: grid;
grid-template-areas:
"header header header"
"content content sidebar"
"content content sidebar"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid. The grid-auto-rows and grid-auto-columns properties size these implicit grid tracks, as well as any explicit grid tracks created by grid-template-areas but not explicitly sized by grid-template-rows or grid-template-columns
... and many more!
Adds vendor prefixes to CSS rules using values from Can I Use
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
ะะฝะดัะตะน ะกะธัะฝะธะบ - Stylelint: ะะฐะบ ะธ ะทะฐัะตะผ ะปะธะฝัะธัั CSS
Lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using cssdb