IE7 CSS Selectors: How they fail


The following table explains the failures of IE7. I am only listing bugs in IE7 CSS from the selector perspective, not from the rendering perspective. The fact that IE7 fails to heed certain valid CSS selectors will provide opportunity for discovering IE hacks and filters. Quirks in rendering CSS will be posted in a future entry.

Selector IE7 Explanation of issues
*  
E  
.class  
#id  
E F  
E > F  
E + F  
E[attribute] Δ Understands attributes with name value/pairing, but does not understand attributes that are incorrect XHTML.  For example, IE7 understands this selector for attributes such as width="12", or alt="" but does not understand align="" or selected.  So, this can only be used for as a hack if you write non-valid XHTML.
E[attribute=value]  
E[attribute~=value] Δ The quirkiness of IE7 in this case is that it employs some case-sensitivity to the value whether or not the attribute type requires case sensitivity. While it makes sense to compare id values in a case senstive manner, attribute values for HTML are case insensitive. The XHTML specifications state that element and attribute names must be lower case, but it does not say anything about attribute values.  In this case, img[align~=LEFT] will match align="LEFT" but not match align="left" but img[align~=left] will match align="left" and align="LEFT".
E[attribute|=value] Δ IE7 has the same quirkiness as above. In this case, img[align|=LEFT] will match align="LEFT" but not match align="left" but img[align|=left] will match align="left" and align="LEFT".
:first-child Δ

Works in most cases except when the first child is a comment. IE7 treats the comment as the first child, even though CSS specifications state that :first-child should apply to elements, and comments are not an element. Note that there is a space between the selector and the colon. 

div :first-child {font-weight: bold;} will not match the paragraph in:
<div class="happy">
<!--comment -->
<p>Hi</p>
</div>

:link  
:visited  
:lang() Χ IE7 fails completely with this selector, which makes this selector perfect for filtering against IE7.:lang(en) { } should match <div lang='en'></div>, <div lang='EN'></div><div lang='en-US'></div> and even the paragraph in <body lang='en'><p></p></body> because language is inherited.
:before Χ the :before pseudoclass, which in other browsers can be used to insert generated content before an element's content,fails in IE7.
::before Χ If IE7 can't handle the :before pseudoclass, did you really think it would understand the double-colon notation of the pseudo-element? See note below for an explanation of the double-colon notation.
:after Χ the :after pseudoclass, which in other browsers can be used to insert generated content after an element's content,fails in IE7.
::after Χ Likewise, if IE7 doesn't understand :before, ::before and :after, it won't understad the double colon pseudo-element after either
:first-letter  
::first-letter Χ

Whereas IE7 recognizes div:first-letter { color:#3333CC;}, it does not recognize div::first-letter { color:#3333CC;}

IE7 seems to have no support for double-colon notation.

:first-line  
::first-line Χ

As in the case of :first-letter, IE7 recognizes div:first-line { color:#3333CC;} but does not recognize div::first-line { color:#3333CC;}

Substring matching attribute selectors
E[attribute^=value] Χ IE7 doesn't understand the concept of "substring" matching. The CSS specifications state that the E element whose attribute value begins exactly with the string listed in the value should be matched.  IE7 only understands exact matches for the entire value. IE7 respects the attribute values that should be case sensitive.
E[attribute$=value] Χ The CSS specifications state that the E element whose attribute value ends exactly with the string listed in the value should be matched.  IE7 only understands exact matches for the entire value.  See the attribute above.
E[attribute*=value] Χ Represents an element with the att attribute whose value contains at least one instance of the substring "val".
E ~ F  
:root Χ This should match HTML, since HTML is the root.  It doesn't.  Simply use html {} instead
:last-child Χ ignores
:o nly-child Χ ignores
:nth-child() Χ These 7 selectors are all currently ignored by IE7 and all other grade-A browsers. Since there is no support for them, I can not compare IE7's handling versus other browsers, and these selectors are useless for "targeting" other browser.
:nth-last-child() Χ
:first-of-type Χ
:last-of-type Χ
:o nly-of-type Χ
:nth-of-type() Χ
:nth-last-of-type() Χ
:empty Χ Ignored, but partially supported by FF and Netscape, so may be useful for targeting those browsers.
:not() Χ ignores
:target Χ ignores
:enabled Χ ignores
:disabled Χ ignores
:checked Χ ignores

Notes:

  • These tests were run in XHTML 1.0 Strict
  • I will elaborate here on the last 7 selectors when i have a bit more time
  • IE7 quirks in rendering CSS (versus understanding CSS) will be posted in a separate entry.
  • This article goes over IE7 failings. Please see CSS3 Selectors and Browser Support for other browser's support of CSS3 selectors.
This entry was posted in CSS (including hacks), IE7, Web Development. Bookmark the permalink.

4 Responses to IE7 CSS Selectors: How they fail

  1. Great, really great informations. Keep going this way :)

  2. RF says:

    “attribute values for HTML are case insensitive”

    That is a false statement. In HTML, each attribute definition includes information about the case-sensitivity of its values.

    http://www.w3.org/TR/html401/types.html#case

  3. Estelle Weyl says:

    @RF You are correct. I guess I just wasn’t specific enough. I was referring to attribute value key terms. For example, the value for the id attribute is case sensitive, but the value for valign is not.

  4. F says:

    You’re referring to the XHTML spec and then applying that to IE7.

    “The XHTML specifications state that element and
    attribute names must be lower case, but it does
    not say anything about attribute values. ”

    Not according to:
    http://www.w3.org/TR/xhtml1/#h-4.11
    | Under XML, the interpretation of [enumerated,
    | CI] values is case-sensitive, and in XHTML 1 all
    | of these values are defined in lower-case.

    Any enumerated value in HTML is CI attribute, and in XHTML is it CS and LC.

    So that means that in XHTML, td align=”top” is valid but td align=”ToP” is invalid.

    Since IE7 doesn’t support XHTML, that’s irrelevant.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>