Selectors

Relational Selectors

Descendant (E F)

Any element F that is a descendant (child, grandchild, great grandchild ..) of an element E Any element F that is a direct child of element Any element F that shares the same parent as E, and comes directly after E in the markup Any element F that shares the same P arent as any E and comes after it in the markup

Child (E > F)

Adjacent Sibling (E + F)

General Sibling (E ~ F)T

Selectors
<article> <header> <h1>Main title</h1> <h2>This subtitle is matched </h2> </header> <p> blah, blah, blah ...</p> <h2>This is not matched by h1~h2, but is by header~h2</h2> <p> blah, blah, blah ...</p> </article>

h1~h2 => First h2 h2~p => last paragraph

Selectors

Attribute Selctors

E[attr]

Matches any element E that has the attribute attr Matches any element E whose attribute attr has within its value the full word val, surrounded by whitespace eg .info[title~=more] Matches any element E whose attribute attr starts with the value val Matches any element E whose attribute attr ends in val

E[attr~=val]

E[attr^=val] (IE8+, WebKit, Opera, Mozilla)

E[attr$=val] (IE8+, WebKit, Opera, Mozilla)

Pseudo-classes

Attributes,form control state , user interactions :enabled :disabled :checked

Radio buttons or checkboxes that are selected or ticked.

Out-of-range: elements whose value is outside the limitations of their range. :required:

Applies to form controls that have the required attribute set. not have the required attribute. Applies to elements whose contents are unable to be altered by the user not limmited to form field only. Applies to elements whose contents are user-alterable, such as text input fie

:optional

:read-only

:read-write

Pseudo-Elements

Targets texts that are part of the document ::first-letter ::first-line :first-line and :first-letter better supported in browsers IE6, IE7, and IE8

Structural Pseodo-class

:root

The root element, which is always the html element. The element F that is the nth child of its parent E. The element F that is the nth child of its parent E, counting backwards from the

E F:nth-child(n)

E F:nth-last-child(n)

last one. li:nth-last-child(1) would match the last item in any list The element that is the nth element of its type in a given parent element. Like nth-of-type(n), except counting backwards from the last element in a parent. The element E that is the first child E of its parent. This is the same as :nth-child(1). The element E that is the last child E of its parent, same as :nth-last-child(1).

E:nth-of-type(n)

E:nth-last-of-type(n)

E:first-child

E:last-child

Structural Pseudo-Class

E:first-of-type

Same as :nth-of-type(1). Same as :nth-last-of-type(1). An element thats the only child of its parent. An element thats the only one of its type inside its parent element. An element that has no children; this includes text nodes, so <p>hello</p> will not be matched. An element in the language denoted by the two-letter abbreviation (en). elements that dont match the selector in the parentheses. Selectors with the :not pseudo-class match everything to the left of the colon

E:last-of-type

E:only-child

E:only-of-type

E:empty

E:lang(en)

E:not(exception)

Generated Content

Content that is not part of the markup but generated in the CSS

::before ::after ::content used to generate the content :attr() acces attribute of the selected content a[href^=http]:after {content: " (" attr(href) ")";} a[href$=pdf] {background: transparent url(pdficon.gif) 0 50% no-repeat;padding-left: 20px;}

Colors

Previos Hex and rgba()

rgb(255,255,255) or rgb(100%,100%,100%) #FFF, or #FFFFFF A-> aphap opacity No Hex representation HSL , HSLA

RGBA

Hue(0-359) Saturation(100% normal,0% shade of grey) lightness(0%=black,50%normal,100% whit)

Example

<a href="...">&lt;HTML5&gt; &amp;{CSS3}</a> aside p + a {

display: block; text-decoration: none; border: 5px double; color: #ffffff; background-color: #484848; text-align: center; font-size: 28px; margin: 5px 5px 9px 5px; padding: 15px 0; position: relative;

Rounded Corners

Border-radius

Creats rounders corners

-moz-border-radius: 25px; border-radius: 25px;

border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-right-radius: 15px; border-bottom-left-radius: 40px; shorthand border-radius,

the order is top-left, top-right, bottom-right,bottom-left Specify two values as top-right and bottom-left Specify three as first refers top-left, the second setsthe top-right and bottom-left, and the third is bottom-right

Drop Shadows

Box-shadow

specify the color, height, width, blur, and offset elements Could be inner and/or outer drop shadows elements -webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); -moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); box-shadow: 2px 5px 0 0 rgba(72,72,72,1); first value is the horizontal offset

Positive = left negative = right6 Positive = left negative = right

Second value = vertical offset