CSS
[attr="value"] /* = exact */
[class~="box"] /* ~= has word */
[class|="icon"] /* |= exact, or prefix (eg, value-) */
[href$=".doc"] /* $= ends in */
[class*="-is-"] /* *= contains */
h3 + p /* + adjacent sibling */
article ~ footer /* ~ far sibling */
.container > .box /* > direct child */
:target (h2#foo:target)
:disabled
:nth-child
:nth-child(3n)
:nth-child(3n+2)
:nth-child(-n+4)
:nth-last-child(...)
:first-of-type
:last-of-type
:nth-of-type
:only-of-type - only child of its parent thats like that
:only-child
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
font: italic 400 14px / 1.5 sans-serif;
/* ^ ^ ^ ^ ^
style weight size* line-height family
required required */
* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Support - Firefox 25+ on OSX, Webkits (Chrome, Safari, etc) */
/* Shorthand */
background: #ff0 url(bg.jpg) left top / 100px auto no-repeat fixed;
background: #abc url(bg.png) center center / cover repeat-x local;
/* ^ ^ ^ ^ ^ ^
color image position size repeat attachment */
/* Multiple backgrounds */
background:
linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('background.jpg') center center / cover,
#333;
/* Other properties */
background-clip: border-box | padding-box | content-box [, ...]*; /* IE9+ */
background-repeat: no-repeat | repeat-x | repeat-y;
background-attachment: scroll | fixed | local;
background: url(x), url(y); /* multiple (IE9+) */
Note: only works with webkit browsers, others will give you fallback.
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
::selection {
background-color: yellow;
}
::-moz-selection {
background-color: yellow;
}
/* chrome, safari */
::-webkit-input-placeholder {
color:#CCC;
font-style:italic;
}
/* mozilla */
input:-moz-placeholder,
textarea:-moz-placeholder {
color:#CCC;
font-style:italic;
}
/* ie (faux placeholder) */
input.placeholder-text,
textarea.placeholder-text {
color:#CCC;
font-style:italic;
}
All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul {
margin:0 0 1.5em 0;
}
ul {
list-style-type:disc;
margin-left:1.3em;
}
ol {
list-style-type:decimal;
margin-left:2em;
}
ol li {
list-style-type:decimal;
display:list-item;
}
ul li {
list-style-type:disc;
}
ul ul li {
list-style-type:circle;
}
ul ul ul li {
list-style-type:square;
}
ol ol li {
list-style-type:lower-alpha;
}
ol ol ol li {
list-style-type:lower-roman;
}
dl {
margin:0 0 1.5em 0;
}
dl dt {
font-weight:bold;
}
dd {
margin-left:1.5em;
}
Instead of putting on the border...
/* add border */
.nav li {
border-right: 1px solid #666;
}
...and then taking it off the last element...
/* remove border */
.nav li:last-child {
border-right: none;
}
...use the
:not() pseudo-class to only apply to the elements you want:.nav li:not(:last-child) {
border-right: 1px solid #666;
}
Sure, you can use
.nav li + li or even .nav li:first-child ~ li, but with :not() the intent is very clear and the CSS selector defines the border the way a human would describe it.The following table describes the operators that can be used to create conditional expressions.
Item | Example | Comment |
|---|---|---|
! | [if !IE] | The NOT operator. This is placed immediately in front of the feature, operator, or subexpressionto reverse the Boolean meaning of the expression. |
lt | [if lt IE 5.5] | The less-than operator. Returns true if the first argument is less than the second argument. |
lte | [if lte IE 6] | The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. |
gt | [if gt IE 5] | The greater-than operator. Returns true if the first argument is greater than the second argument. |
gte | [if gte IE 7] | The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. |
( ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. |
& | [if (gt IE 5)&(lt IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true |
| | css[if (IE 6) |
Last modified 6mo ago