First of all I apologize for my stupid question...I am a new user in drupal and I don't know very much about php and css... My trouble is the following:I have many elements in my website with class "field set" , all I want to do is to have a background and a border style for some of such field set, but I want to set differents style for a specific "fieldset" element! I try with firebug to find the elements and I found this:

<div class="content"><div class="view view-home-lista-completa-con-openlayer view-id-home_lista_completa_con_openlayer view-display-id-page view-dom-id-4812ec06a9a1759846345be18533fa6b"> 
  <div class="pannelloricerca">
    <div class="view-filters">
      <form action="/completa-proximity" method="get" id="views-exposed-form-home-lista-completa-con-openlayer-page" accept-charset="UTF-8">
        <div class="views-exposed-form">
          <div class="views-exposed-widgets clearfix">
            <div id="edit-circle-wrapper" class="views-exposed-widget views-widget-filter-circle">
              <div class="views-operator">
                <input type="hidden" name="circle_op" value="&lt;" />
              <div class="views-widget">
                <fieldset class="openlayers-proximity-filter-exposed form-wrapper" id="edit-circle">
                <div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-circle-value">
                  <span class="field-prefix">È a meno di</span> 
                  <input type="text" id="edit-circle-value" name="circle[value]" value="" size="3" maxlength="128" class="form-text" /> 
                  <span class="field-suffix">Chilometri </span>
                <div class="form-item form-type-textfield form-item-circle-location">
                  <span class="field-prefix">da</span >
                  <input type="text" id="edit-circle-location" name="circle[location]" value="" size="20" maxlength="128" class="form-text" />

I want to set a specific background for the element: < fieldset class="openlayers-proximity-filter-exposed form-wrapper" id="edit-circle"> but I cannot find how to tell in the css to apply new style to this one and only this !! I tried to set attribute to the class: .openlayers-proximity-filter-exposed .form-wrapper .fieldset but nothing happened .. Can anybody help me, please?? just tell me how it works when you have to customize classes into div as per this example. Thank you all!!!!!

  • It's better to start with some basic CSS before you start customizing Drupal. (Drupal does have a lot of classes). Have a look here: cssbasics.com You can read all of it in a day and then fix your backgrounds tomorrow :) – Neograph734 Nov 23 '12 at 13:45
  • Hi and welcome. Although you're using Drupal (well done ;-)), your question is not actually Drupal related, more CSS related. It really belongs on Stack Overflow. I think your question might actually refer to something else, but I'm not confident enough that it does to edit it, so if you want to try that then I'm sure it'll remain on-topic :) – Chapabu Nov 23 '12 at 13:49
  • 1
    Oh sorry! maybe you are right! thanks @Neograph734 for his help! and thanks Chapabu: yes probably my question is not so pertinent with drupal trouble...i will post it in an other section...tahnk you – user11609 Nov 23 '12 at 13:54

If you want to add a style to a particular element in CSS, you should use the ID of the element rather than the class as IDs are unique.


#edit-circle {
|improve this answer|||||

We call it CSS Selector and your selector failed because it select something else:

.openlayers-proximity-filter-exposed .form-wrapper .fieldset select elements with fieldset class within element with form-wrapper class and wrapped with elements with openlayers-proximity-filter-exposed class.

In your way, your selector should be:


it means fieldset elements with both openlayers-proximity-filter-exposed and form-wrapper CSS classes.

|improve this answer|||||
  • I would DEFINITELY steer clear of applying styles based on HTML elements themselves. Targeting fieldset.openlayers[...] rather than just .openlayers[...] adds a high level of specificity and severely reduces re-usability of the CSS. – Chapabu Nov 23 '12 at 14:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.