IE7 Does Have Some New CSS Functionality

As I discussed in this post, I've been very disappointed with IE7's lack of enhanced support for CSS. However, IE7 does now support some CSS selectors that it didn't previously, so here is a brief summary of IE7's increased CSS support.

Adjacent Sibling Selector

The syntax for this selector is: E1 + E2 where E represents the HTML element being selected. This selector matches elements when E1 and E2 are both children of the same parent and E2 immediately follows E1 in the source code. (Note, the whitespace that I placed either side of the plus sign is optional, the code E1+E2 is equally valid).

For example, using the HTML code,

<div><p>Lorem Ipsum</p><blockquote>Ipsum Lorem</blockquote><blockquote> Integer molestie ligula</blockquote></div>

the CSS code

p + blockquote {text-indent: 1em; font-weight: bold;}

would cause the text "Ipsum Lorem" inside the blockquote tag to be indented by 1 em and displayed using bold text. However, the text "Integer molestie ligula" in the second blockquote would be shown with default blockquote formatting.

This selector is particularly useful when you want the formatting of the first element in a group of successive identical elements to be slightly different, such as the first item in a list, or the first paragraph in a group of successive paragraphs.

Child Selector

The child seletor is a refinement of the standard descendant selector that uses the syntax E1 E2, where E2 comes anywhere below E1 in the document tree (i.e. it's a child, grandchild, great-grandchild, etc.). The child selector limits this to only those elements that are children of the parent element, thus, grandchildren, etc. are not selected.

The syntax for the child selector is: E1 > E2 where E represents the HTML element being selected. This selector matches elements when E2 is a child of E1 in the source code (i.e. the document tree). (Note, the whitespace that I placed either side of the greater-then sign is optional, the code E1>E2 is equally valid).

For example, using the HTML code,

<div><b>Lorem Ipsum</b> <p><b>Ipsum Lorem</b></p></div> <p><b>Integer molestie ligula</b></p>

the CSS code

div > b {color: red;}

would cause the text "Lorem Ipsum" inside the first B tag to be displayed in red. However, the text in the second and third B tags would be displayed with default B tag formatting. The second B tag (containing the text "Ipsum Lorem") is a grandchild of the DIV tag, so does not match the selector. The third B tag (containing the text "Integer molestie ligula") is a child of a P tag and isn't even a descendant of a DIV tag, so again, it does not match the selector.

First-Child Pseudo Class

This extension of the child selector is also now functional in IE7 and allows formatting to be applied to only the first child of a parent element.

The syntax for the first-child pseudo class is: E:first-child E represents the HTML element being selected. This pseudo class can be used in combination with other selectors, for example, E1 > E2:first-child will match elements of type E2 that are children of elements of type E1, but only the very first child.

For example, using the HTML code,

<div><p>Text 1</p> <p>Text 2</p> </div>

the CSS code

div > p:first-child {background-color: green;}

would cause the first paragraph in the code to be displayed with a green background, whereas the second paragraph would have the default P tag background color.

Similarly, using the HTML code

<div><p><b>Text 1</b></p> <p><b>Text 2</b></p> </div>

the CSS code,

p:first-child b {color: red;}

would cause the text inside the first paragraph's B tag to be displayed in red, because it's parent P tag is the first child of the DIV tag. However, the text inside second paragraph's B tag would have default formatting because it is the second child of the DIV tag.

Conclusion

This isn't exactly a giant step forward for Internet Explorer with regard to CSS compliance, and there may be other new functionality that I am not yet aware of, but, I guess, at least it is a step in the right direction, albeit a tiny one.

Technorati Tags: ie7, internet explorer 7, internet explorer, css