# CSS

### Table of Contents

* [Selectors](#selectors)
* [Clearfix](#clearfix)
* [Font](#font)
* [Font Antialiasing / Smoothing](#font-antialiasing-smoothing)
* [Background](#background)
* [Custom Selectbox](#custom-selectbox)
* [CSS Selection](#css-selection)
* [Placeholder Styling](#placeholder-styling)
* [Truncate String with Ellipsis](#truncate-string-with-ellipsis)
* [Default list styling](#default-list-styling)
* [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-apply-unapply-borders-on-navigation)
* [IE Browser-Specific Conditions](#ie-browser-specific-conditions)

#### Selectors

```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

```css
.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

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

#### Font Antialiasing / Smoothing

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

Ref - [Link](http://maxvoltar.com/archive/-webkit-font-smoothing)

#### Background

```css
/* 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.

```css
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

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

#### Placeholder Styling

```css
/* 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.

```css
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

More techniques [here](https://software.intel.com/en-us/html5/hub/blogs/ellipse-my-text/), including multi-line ellipsis.

#### Default list styling

```css
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...

```css
/* add border */
.nav li {
  border-right: 1px solid #666;
}
```

...and then taking it off the last element...

```css
/* remove border */
.nav li:last-child {
  border-right: none;
}
```

...use the `:not()` pseudo-class to only apply to the elements you want:

```css
.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.

| 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)                                                                                                                                    |