CSS

Table of Contents

Selectors

[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

.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

font: italic 400    14px     / 1.5       sans-serif;
/*    ^      ^      ^        ^           ^
      style  weight size*    line-height family
                    required             required */

Font Antialiasing / Smoothing

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Support - Firefox 25+ on OSX, Webkits (Chrome, Safari, etc) */

Ref - Link

Background

/* 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+) */

Custom Selectbox

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;
}

CSS Selection

::selection {
  background-color: yellow;
}
::-moz-selection {
  background-color: yellow;
}

Placeholder Styling

/* 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;
}

Truncate String with Ellipsis

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;
}

More techniques here, including multi-line ellipsis.

Default list styling

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;
}

Use :not() to Apply/Unapply Borders on Navigation

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.

IE Browser Specific Conditions

The following table describes the operators that can be used to create conditional expressions.

PreviousChromeNextGit

Last updated