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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.logeshpaul.com/wiki/code/css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.