CSS div[id|="subPane"] error

Question

upon knowing that parent>div CSS selector is not recognizable in IE, i re-code my CSS styles from this e.g:

div#bodyMain div#paneLeft>div{/*styles here*/}

to this:

div#bodyMain div#paneLeft div[id|="subPane"]{/*styles here*/}

here's my html snippet:

<div id="bodyMain">
     <div id="paneLeft">
      <div id="subPaneCategory">
       <p id="subPaneTitle">Shop Item Categories</p>
       <!--other html here -->
</div></div</div>

The problem is my /styles here/ doesn't work in Mozilla now. are there somethings i need to know in the usage of element[attribute|="value"] ? thanks

Answer 1

why not just use CSS classes?

<div id="bodyMain">
    <div id="paneLeft">
        <div id="subPaneCategory" class="subpane">
            <p id="subPaneTitle" class="subpane">...</p.
        </div>
    </div>
</div>

And then your CSS is easy and cross-browser:

#paneLeft div.subpane {
    /* whatever */
}

Also note that there's no point in having CSS selectors using 2 ids (unless you need it to increase the specificity). That is: div#bodyMain div#paneLeft could just be rewritten as #paneLeft.

Answer 2

The pipe (|=) is for matching hyphenated values. IE probably ignores the pipe, and in Mozilla your styles no longer work because it respects the pipe, but that does not match your markup (no hyphens).

The ^= operator matches "StartsWith" the value, and $= matches "EndsWith". I'm pretty sure neither of those are recognized by IE either. If you need cross-browser support it's generally safest to stick with:

• ele
• #id
• .class
• (space) descendant
• And a few other limited ones like :hover for a

That's pretty much it. Thanks IE :)