CSS3 Cheat Sheet
Because of my shit-poor memory, I thought it would do me some good to have the more commonly used CSS3 rules in one logical place. In no particular order.
border-radius »
box-shadow »
:nth-child »
:before/:after »
multiple background images »
Child Selector: div>p »
Adjacent Sibling Selector: div+p »
General Sibling Selector: div~p »
(1) border-radius {...}Support = FX, Opera, Chrome, Safari, IE9+
#id {
border-radius:10px;
}
Syntax...
border-radius:top right bottom left;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
Result...
(2) box-shadow {...}Support = FX, Opera, Chrome, Safari, IE9+
#id {
box-shadow:0 0 10px #000;
}
Syntax...
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow - Required. The position of the horizontal shadow. Negative values are allowed
v-shadow - Required. The position of the vertical shadow. Negative values are allowed
blur - Optional. The blur distance
spread - Optional. The size of shadow
color - Optional. The color of the shadow
inset - Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
Result...
/* both outer and inner shadow syntax */
#id {
box-shadow:0 0 10px #000, inset 0 0 10px #000;
}
Result...
(3) :nth-child(odd) {...}Support = FX, Opera, Chrome, Safari, IE9+
#id li:nth-child(odd) {
background:yellow;
}
Syntax...
Odd and even are keywords that can be used to match child elements. Either keyword will target every other element.
Result...
- odd
- even
- odd
- even
#id li:nth-child(2n) {
background:yellow;
}
Result...
- odd
- even
- odd
- even
#id li:nth-child(3n) {
background:yellow;
}
Result...
- one
- two
- three
- four
- five
- six
(4) :before/:after {...}Support = FX, Opera, Chrome, Safari, IE8+
#id:before, #id:after {
content:'X';
font:bold 30px Arial;
color:red;
line-height:12px;
}
Result...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
(5) Multiple backgound images {...}Support = FX, Opera, Chrome, Safari, IE9+
#id {
height:70px;
background:url(../code/images/1.png) top left no-repeat, url(../code/images/2.png) top right no-repeat, url(../code/images/3.png) bottom left no-repeat, url(../code/images/4.png) bottom right no-repeat;
background-color:#000;
border:1px solid #fff;
}
Result...
(6) Child Selector: div>p {...}Support = FX, Opera, Chrome, Safari, IE8+
The descendant selector matches all elements that are descendants (AKA inside the parent) of a specified element. You can or cannot have white space is around it.
div {
background:olive;
}
div>p {
background:teal;
}
<div>div <p>p</p> <p>p</p> </div>
Result...
p
p
(7) Adjacent Sibling Selector: div+p {...}Support = FX, Opera, Chrome, Safari, IE8+
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following", so there can be no elements between the sibling elements. Text in between does not break the selection - only tags count as a element.
div {
background:aqua;
}
div+p {
background:red;
}
<div></div><p></p><>p</p>
Result...
p
p
(8) General Sibling Selector: div~p {...}Support = FX, Opera, Chrome, Safari, IE8+
The selector matches elements that are siblings of a given element. The elements don’t have to be adjacent siblings, but they have to have the same parent.
div {
background:yellow;
}
div~p {
background:fuchsia;
}
<div></div><p></p><>p</p>
Result...
p
p
