Hack hack hack...

An open journal-- some of it written for you, but most of it is for me.

CSS

Sprites

loading two images as one and then changing the position like for a hover or focus.

1
2
3
4
5
6
7
8
9
10
11
12
13
.logo {
  background: url(logo3.png);
  display: block;
  height: 75px;
  text-indent: -9999px;
  width: 250px;
}
.logo:hover, .logo:focus {
  background-position: 0 -75px;
}
.logo:active {
   background-position: 0 -150px;
}

Selectors

Pseudo Classes: :hover / :focus / :active / :visited :first-child / :last-child / :only-child :nth-child() / :nth-of-type()

Pseudo Elements: :before / :after :first-line / :first-letter

Intervals
1
2
3
.hours li:nth-child(4n+1) {
  background: #c5c9cf;
}

li:nth-child(an+b){} a = the intervals b = the position (zero if it isn’t set)

Targeting the 1st line of the 1st para
1
2
3
p:first-child:first-line {
  font-weight: bold;
}
:before pseudo element
1
2
3
4
p:before {
 content: '->';
 margin-right: 5px;
}

Adjacent sibling selectors: : have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:

1
2
3
4
5
math + p { text-indent: 0 }

h1 + h2 { margin-top: -5mm }

h1.opener + h2 { margin-top: -5mm }

Relative lengths em unit : Equal to the computed value of the ‘font-size’ property of the element on which it is used. ex unit : Equal to the font’s x-height.

1
2
3
4
5
6
7
8
p
{
  line-height:40px;
  letter-spacing:30px;
  word-spacing:10px;
  text-align:right;
  white-space:nowrap
}

links: - CSS Tricks- Pseudo Class Selectors - Amazing stuff pseudo-elements can do

Comments