Add a specific css to a widget

Question

I have a theme with a sidebar and 3 widgets. I want to change the color of one of those widgets. The problem is that all the widgets have the same code:

<div class="box_outer">
  <div class="widget">
    <h3 class="widget_title">Widget title</h3>
    <div class="wid_border"></div>
    <div class="menu-widget-container">
      <!-- widget content -->
    </div>
  </div>
</div>

How can I change the generated code to make it build a unique identifier for each widget, and get something like this:

<div class="box_outer" id="widget1">
  <div class="widget">
    <h3 class="widget_title">Widget title</h3>
    <div class="wid_border"></div>
    <div class="menu-widget-container">
      <!-- widget content -->
    </div>
  </div>
</div>

Answer 1

If you register your sidebar this way, your all dynamic widgets gets a unique class automatically e.g. - class="widget-container widget_archive"

register_sidebar( array(
    'name' => __( 'Primary Widget Area', 'twentyten' ),
    'id' => 'primary-widget-area',
    'description' => __( 'The primary widget area', 'twentyten' ),
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

Note -

'before_widget' => '<div id="%1$s" class="widget %2$s">',

• " %1$s " - Will print the unique widget id.
• " %2$s " - will print the unique class for each widget.

Then we can apply custom styling as necessary to that unique class.

Reference - Codex - Register Sidebar