javascript - Hide Shop By "Color" Attribute on Certain Categories via Custom Layout Update -

how hide attribute on single category via custom layout update, created new css file , added next code custom layout update in category want hide color attribute

<reference name="head"> <action method="addcss"><stylesheet>css/custommods.css</stylesheet></action> </reference> 

now, custommods.css is

.faq_accordian .arrowlistmenu {   visibility: hidden; } 

but code hides shop attributes because attributes have same class. snippet of styles.css file

/* ======================================================================================= */ /* ===================accordian */ .faq_accordian{margin:0;padding:0;} .faq_right{     width:732px;     height:auto;     float:left; } .faq_banner{background:url(images/media_banner.png) no-repeat;     height:139px;     width:724px;     border-bottom:3px solid #fec00f; } .faq_banner h1 {font-family: 'futura_ltregular'; font-size:32px;color:#fec00f;margin-left:30px;margin-top:0px;padding-top:15px;font-weight:normal;text-transform:uppercase;} .faq_banner p {width:330px;margin-left:30px;color:#cccccc;font-weight:bold;} .faq_right h3 {padding-left:25px;font-weight:normal;} .col-right {     float: right; }  .col3-layout .col-main {float:right;} .col3-layout .col-wrapper {float:left;} .col3-layout .grid_3 {margin:0;} .col3-layout .grid_6 {width:490px;} /*left menu */ .faq_accordian .arrowlistmenu{ } .faq_accordian .arrowlistmenu .menuheader{ /*css class menu headers in general (expanding or not!)*/    background:url(../images/down_arrow.png) no-repeat scroll right 15px !important;     color: #404040;     cursor: pointer;     font-family: "futura_lt_btlight";     margin: 10px 0 0;     padding:5px;     text-transform: none;     border: 1px solid #d5d5d5;     -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight:normal; /*font-size:16px;*/ } .faq_accordian .arrowlistmenu ul li:hover,.faq_accordian .arrowlistmenu ul li:hover a{background-color:#181818;color:#fff !important;} #narrow-by-list .arrowlistmenu .categoryitems li a:hover{color:#ffffff !important;} /*.faq_accordian .arrowlistmenu h3 {     margin: 0 !important; }*/ .add-to-cart .button.btn-cart:hover{ border-bottom: 3px solid #000 !important;      margin-bottom: -3px;     color: #000 !important;     text-decoration: none !important;} /*.faq_accordian:nth-child(2) .arrowlistmenu h3{ border: 1px solid transparent !important;     margin: 40px 0 0 !important; }*/ .arrowlistmenu .menuheader{ /*css class menu headers in general (expanding or not!)*/    background:url(../images/open_arrow.png) no-repeat scroll right 12px  !important;     color: #404040;     cursor: pointer;     font:bold 12px 'futura_ltregular', helvetica, sans-serif;     margin: 10px 0 0;     padding:8px !important;      text-transform: none;     border: 1px solid #d5d5d5;     -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; }  .faq_accordian .arrowlistmenu .openheader{ /*css class apply expandable header when it's expanded*/ background: url(../images/down_arrow.png) no-repeat scroll right 10px #fafafa; border:1px solid #eaeaea; color:#000; } .faq_accordian .arrowlistmenu ul , .faq_accordian .arrowlistmenu ol{ /*css ul of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each ul , rest of content*/     background:#fff;     border:1px solid #eaeaea;  padding:10px; } .faq_accordian .arrowlistmenu ul li , .faq_accordian .arrowlistmenu ol li{     color: #404040;     display: block;     font-family: "futura_lt_btlight";     font-size: 12px;     text-decoration: none;     line-height:25px;     padding: 5px; } .faq_accordian .arrowlistmenu ul li p , .faq_accordian .arrowlistmenu ol li p{     display: block;     font-family: 'futura_ltregular',helvetica,sans-serif;     font-size: 14px;     text-decoration: none;     line-height:21px;} .faq_accordian .arrowlistmenu ul li , .faq_accordian .arrowlistmenu ol li p{ color:#666 !important; } .faq_accordian .arrowlistmenu ul li a:visited , .faq_accordian .arrowlistmenu ol li a:visited{ color:#cccccc; } .faq_accordian .arrowlistmenu ul li a:hover , .faq_accordian .arrowlistmenu ol li a:visited{ /*hover state css*/ color:#404040; } 

maybe solution create different class single "color" attribute , set visibility hidden? file in have make css modifications located?

thank you.

the body tag should have class category name, such category-nails should edit css this:

.category-nails .faq_accordian .arrowlistmenu {   visibility: hidden; } 

to target category.

if body not have class, make sure in template file (maybe 1column.phtml) body this:

<body<?php echo $this->getbodyclass()?' class="'.$this->getbodyclass().'"':'' ?>>