* Min/max width/height support (also for images, which did not work in IE7b2)

* Transparent borders

* Fixed positioning support

* Alpha channel PNG support (Not a CSS feature)

We will concentrate on CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)

We use a lot of descendant selectors: div#foo div#fooFoo p {color:red}

It's useful, yes, but it's also a fairly generalized kind of selection combination.

A TREE _ VIEW

Body element has two children: a p element and a ul element. The p element, in turn, has two children: the em and strong elements directly below it on the tree. The p element has one parent, and that's the body element. In fact, an element can only ever have one parent, although it can have many children.

CHILD SELECTOR

Child combinator targets direct children of another element - designated by a ">" symbol

ex: <div><p><span>Text goes here</span></p></div>

div span {color: red;} would work

div>span {color: red;} this would not

it has to be a direct child - take out the P tage and it will target all spans that are children of <div>

ex:

body > p {color: green;}This rule will make green any paragraph which is a direct child of the body element. Therefore, any paragraph which is the child of some other element-- for example, a div or a table cell-- will not be matched by this rule.

How is this different from traditional contextual/descendant selectors? The difference is that, given a selector like body p, any paragraph which is a descendant of the body will be matched. That can mean a child paragraph, of course, but it can also mean a paragraph which is contained inside a table cell that's inside a table that's part of a div.

ADJACENT SIBLING

Adjacent Sibling combinator, designated by a "+" symbol

The adjacent selector basically allows you to reference an HTML element that's adjacent to another element:

h2+p {color:blue;}, you would be able to make the textblue for any paragraph that directly followed an H2 element.

Another great example of when you may use the adjacent selector is in horizontal lists. Often, you may want to format the first item slightly differently to the other items in the list. So, if you wanted to assign a leftborder to each navigation item except for the first, you could use this CSS code:

li+li {border-left:1pxsolidblack;}

FIRST-CHILD

allows us to format the first HTML element differently in any given section without having to assign it a class or id. So, for example, say you wanted the first paragraph in the content area to never have a topmargin, you could use this CSS command:

#content p:first-child {margin-top: 0;}

1. div.article p:first-child {

2. font-style:italic;

3. }

ATTRIBUTE SELECTORS

Attribute selectors may match in four ways:

[att]

Match when the element sets the "att" attribute, whatever the value of the attribute.

[att=val]

Match when the element's "att" attribute value is exactly "val".

[att~=val]

Match when the element's "att" attribute value is a space-separated list of "words", one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces).

[att|=val]

Match when the element's "att" attribute value is a hyphen-separated list of "words", beginning with "val". The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.

Example(s):

For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value: