Tutorial :Refactoring CSS selectors



Question:

I have following code:

#adminmenu li.hideshow-news, li.hideshow-users, li.hideshow-pages, li.hideshow-gallery, li.hideshow-references, li.hideshow-settings  {  display: none;  font-size: 11px;  background: #fff;  padding: 3px; }  

I want to achieve (as I tried here) using only one line for diffrent classes on

  • in div "adminmenu".

    How to rewrite this? Code written above is working only for first class #adminmenu li.hideshow-news, whether other following statments don't.

    Do I really need to do:

    #adminmenu li.hideshow-news {      display: none;      font-size: 11px;      background: #fff;      padding: 3px;  }  #adminmenu li.hideshow-users {      display: none;      font-size: 11px;      background: #fff;      padding: 3px;  }  .....  

  • Solution:1

    The grouping selector (,) groups complete selectors, not partial ones.

    #adminmenu li.hideshow-news,   #adminmenu li.hideshow-users,   #adminmenu li.hideshow-pages,   #adminmenu li.hideshow-gallery,   #adminmenu li.hideshow-references,   #adminmenu li.hideshow-settings  { ... }  

    That said, it might be easier to just say:

    #adminmenu li { ... }  


    Solution:2

    #adminmenu li.hideshow-news,#adminmenu li.hideshow-users,#adminmenu li.hideshow-pages, li.hideshow-gallery,#adminmenu li.hideshow-references,#adminmenu li.hideshow-settings  {  display: none;  font-size: 11px;  background: #fff;  padding: 3px;}  


    Solution:3

    You should use:

    #adminmenu li.hideshow-news, #adminmenuli.hideshow-users, ETC...  {  }  

    Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
    Previous
    Next Post »