CSS 2

• X + Y (adjacent selector) means it selects the element preceded by the former element. div + p effects on p tag coming immediately after closing div tag.   
• X > Y means Y is immediate child of X.
• X ~ Y is similar to X + Y but less strict. div ~ p effects on p tag coming   after closing div tag at same level.
• X[href=”foo”].
• X[href*=”foo”]. It means href = *foo*.
• X[href^=”foo”]. It means href = ^foo*.
• X[href$=”foo”]. It means href = *foo$.
• X[data-*=”foo”]. It means   X[data-xyz=”foo”] will access all tags with attribute data-xyz=”foo”.
• X[data~*=”foo”]. It allows us to target an attribute which has a spaced-separated list of values. It means   X[data~xyz=”foo”] will access all tags with attribute data-xyz=”eoo goo foo”.

General

• display: none takes the element completely out of play, whereas visibility: hidden keeps the element and its flow in place without visually representing its contents (a gap is kept for the element, say in case of a div).
• block elements put a line break before and after the element.
• Pseudo classes:   selector: pseudo class {property: value;} E.g.: link, visited, active, hover.
• Pseudo element: (IE does not support) selector:pseudo element {property: value;} E.g.: first-letter, first-line, before, after.
• If the selectors are the same then the latest one will always take precedence.
• The more specific a selector, the more preference it will be given when it comes to conflicting styles.
• You give every id selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1.
• @ At-rules are instructions or directives to the CSS parser. We have given some examples below.

The @charset at-rule can be used to specify the character encoding of an external style sheet. It must appear before anything else in the file.

The @import at-rule allows us to import one style sheet into another. All @import at-rules must appear before any rules.