CSS form[action] not working with Query Strings

Question

Hi all having a few problems with my CSS I am trying to highlight a link on the navigation based on the page the user is on.

I have this style which works as I would like it to do, but when I pass a query-string into pcisHPprofile.aspx the CSS is not working. Does anyone know how i can get this style to work with query-strings?

 body form[action="pcisHPprofile.aspx"] #btnuser

{
    padding: 18px 4px 5px 4px;
    background-image: url(../images/tabbluleft.gif) ;
    background-repeat:no-repeat; 
    color: #fff;

}



<div id="nav" class="nav" >

      <ul>
       <li id="tab1">
       <a id="btnsession" href="pcissessionlist.aspx" > <span >Session</span></a>
         </li>
          <li id="tab2">
              <a id="btnsystem" href="pcissystemsettings.aspx" > <span >System Settings</span></a>
            </li>
          <li id="tab3">
          </li>
          <li id="tab4">
                            <a id="btnuser" href="pcisuserlist.aspx" > <span >User Logins</span></a>
              </li>
          <li id="tab5">
                                          <a id="btninterpreter" href="pcisinterpreterlist.aspx" > <span >Interpreter Profile</span></a>

              </li>
       <li id="tab6"><asp:LinkButton ID="btnreports" runat="server" Visible="false" cssid="cssreports" PostBackUrl="#"><span>Reports</span></asp:LinkButton></li>
      </ul> 

    </div>

Answer 1

Using action attribute for styling is a bad practice. Just give your form a name, class or ID like <form class="pcisHPprofile" action="pcisHPprofile.aspx"> and then apply CSS style to that name/class/id.

form.pcisHPprofile { 
     padding: ...

Answer 2

I assume that the #btnuser ARE some buttonS inside the some forms, where one of the forms have action="pcisHPprofile.aspx"?

If that is correct, then your error is the fact that you have many buttons with the same id attirbute id="btnuser". The ID attibute MUST be uniqe on the page. change the id="btnuser" to class="btnuser" on the buttons and your selector from:

body form[action="pcisHPprofile.aspx"] #btnuser {
}

to

body form[action="pcisHPprofile.aspx"] .btnuser {
}

Then it should work.

In the first form it might work only if the FIRST button with id="btnuser" is actually inside the form with action="pcisHPprofile.aspx". If it is inside any other form, then it will not work.

Best regards, SWilk

UPDATE:

After OP updated the question, I think that this form of selector should work:

body form[action^="pcisHPprofile.aspx"] #btnuser {
...
}

It would a element with id=btnuser inside a form, which action begins with "pcisHPprofile.aspx". It would not matter if the acutal action attibute contain only "pcisHPprofile.aspx" or "pcisHPprofile.aspx?any-parameters&and=some-values".

Best regards, SWilk

Answer 3

Found a working solution. a little hacky which I am not 100% keen on but it works.

I changed the query string to look like this

profile.aspx?-&username=

from this

 profile.aspx?username=

and I changed the style to

Form[action|="pcisinterpreterprofile.aspx?"] #tab5


{
background-image: url(../images/tabbluright.gif);
  background-repeat:no-repeat; 

}

The difference is that I have changed the = to an |=.

[att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in RFC 3066 ([RFC3066]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.

by doing this the css selector works on pages with query strings. you just need to make sure the query string has at least ?- at the start. As I said at the last its not great but works.