:only-child
Targets elements with no siblings
CSS
div:only-child {
color: red;
}
:empty
Targets elements with no children or content
div:empty {
background: black;
}
CSS
CSS UI element states pseudo-classes – :focus, :disabled, :checked
input:focus, textarea:focus {
border-color: #52bab3;
}
input:disabled {
background: #ddd;
}
input[type="checkbox"]:checked + label {
font-weight: bold;
}
CSS Add SVG icon to every PDF, JPG, ZIP with CSS attribute selectors
CSS Substring Matching Attribute Selectors
“Begins With” / “Ends With” / “Contains”
CSS Combinators
Child Combinators > Greater than
Direct children of the form element
form > a{ }
Adjacent sibling combinator + Plus sign
Paragraphs that come immediately after any image
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
img + p { }
General sibling combinator ~ sign
Paragraphs that are siblings of and subsequent to any image
The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.
img ~ p {
color: red;
}
CSS Attribute Selectors – Input Types
input[type="text"] input[type="textarea"] input[type="email"] input[type="checkbox"] input[type="password"] input[type="submit"] input[type="button"] input[type="search"] input[type="url"] input[placeholder] a[target="_blank"] img[title="avatar"]
Transparent Gradient with Background Image
Gradient 1
.gradient-1 {
background: linear-gradient(steelblue, transparent 90%), url('https://flames.hu/wp-content/uploads/2013/09/desk.jpg') no-repeat center;
background-size: cover; height: 500px;
}
Gradient 2
.gradient-2 {
background: linear-gradient(steelblue, transparent 90%), linear-gradient(0deg, white, transparent ), url('https://flames.hu/wp-content/uploads/2013/09/desk.jpg') no-repeat center;
background-size: cover;
height: 500px;
}
Box-Shadow effect
$shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),0 8px 16px -8px hsla(0, 0%, 0%, 0.3),0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
$shadow: 0 15px 20px -12px rgba(0,0,0,.8);
$shadow: 0 50px 75px rgba(0,0,0,.1);
Oander
$shadow: 0 0 1.25rem rgba(20,32,50,.1);
Add Gradient to Background Image with CSS
CSS
header {
text-align: center;
background: linear-gradient(90deg, #d4eece, #55b3d0, #1e7eb7), url('../images/header-bg.jpg') no-repeat;
background-blend-mode: multiply;
background-size: cover;
}
CSS
.cover {
background: url('');
background-blend-mode: multiply;
background-size: cover;
background-position: center;
}
.transparent-filter {
background-color: rgba(0,105,142,.8);
}