How to specify different horizontal restore & collapse icon for af|panelSplitter using Skinning based on Style class or position?

Question

Hello,
I am trying to provide different horizontal restore & collapse icon for af|panelSplitter using Skinning based on Style class or position. I have 2 af:panelSplitter with orientation="horizontal" - One with positionedFromEnd="true" one with positionedFromEnd="false". I want to specify the horizontal collapse and restore icon using Skinning. I want specify different icons based on positionedFromEnd. When I specify icons they are appearing for both splitters. I gave 2 different styleClass to these splitter but it is not taking them in account,
JSPX Page -
<af:panelSplitter orientation="horizontal" splitterPosition="196" positionedFromEnd="false" id="pnlSplitterLeft" collapsed="false" styleClass="panelSplitterLeftClass">
  <f:facet name="first">
  <!-- Content of First Facets -->
  </f:facet>
  <f:facet name="second">
  <af:panelSplitter orientation="horizontal" splitterPosition="196" positionedFromEnd="true" id="pnlSplitterRight" collapsed="false" styleClass="panelSplitterRighClass">
  <f:facet name="first">
  <!-- Content of First Facets -->
  </f:facet>
  <f:facet name="second">
  <!-- Content of First Facets -->
  </f:facet>
  </af:panelSplitter>
  </f:facet>
</af:panelSplitter>
CSS Skinn
af|panelSplitter::horizontal-restore-icon {
    width: 10px;
    height: 55px ;
    content : url("/skins/AppSkin/Left_Open.gif");
af|panelSplitter::horizontal-collapse-icon {
    width: 10px;
    height: 55px ;
    content : url("/skins/AppSkin/Left_Close.gif");
af|panelSplitter.panelSplitterLeftClass::horizontal-restore-icon {
    width: 10px;
    height: 55px ;
    content : url("/skins/AppSkin/Left_Open.gif");
af|panelSplitter.panelSplitterLeftClass::horizontal-collapse-icon {
    width: 10px;
    height: 55px ;
    content : url("/skins/AppSkin/Left_Close.gif");
af|panelSplitter.panelSplitterRighClass::horizontal-restore-icon {
    width: 10px;
    height: 55px ;
    content : url("/skins/AppSkin/Right_Open.gif");
af|panelSplitter.panelSplitterRighClass::horizontal-collapse-icon {
    width: 10px;
    height: 55px ;
    content : url("/skins/AppSkin/Right_Close.gif");
It is always showing Left_Open.gif and Left_Close.gif for both splitters. But I want different image.
How to specify different horizontal restore & collapse icon for af|panelSplitter using Skinning based on Style class or position?
- Sujay

Answer 1

CSS attribute selectors are what you are talking about, but binding the selector with EL is a more-common approach. Using selectors like this require you to ensure browser support.
af|panelSplitter.panelSplitterRighClass::horizontal-collapse-icon [positionedFromEnd=true]