If you intend to style the sidebar in the backend, you do not need to do anything else. when you use the code you posted, the html created by WordPress for the sidebar contain a div with the id attribute equal to the id of the sidebar.
Consider this code:
function custom_colored_sidebar() {
register_sidebar( array(
'name' => 'Test Sidebar',
'id' => 'sidebar-test',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
add_action('admin_enqueue_scripts', 'widget_style');
}
function widget_style( $page ) {
if ( $page == 'widgets.php' ) {
echo '<style>div#sidebar-test { background-color:#f00; }</style>';
}
}
add_action('init', 'custom_colored_sidebar');
As you can see I registered a sidebar with the id 'sidebar-test' and then I used 'admin_enqueue_scripts' to put some style on a div withe the id 'sidebar-test' only if the current admin page is 'widgets.php'.
The right way is enqueue an external css, but for sake of semplicity I just echo the style.
This is the result:
As you can see I styled the sidebar widget doind nothing else.
You can notice that the div with id equeal to sidebar id is inside the widget, if you want to style the widget wrapper or the title, only way is use javascript, something like:
jQuery( document ).ready(function($) {
$('#sidebar-test').closest('.widgets-holder-wrap').addClass('sidebar-test-wrapper');
});
Using this code (that should be enqueued only in widgets.php page, you attach the class 'sidebar-test-wrapper' to the container of your target sidebar, so you can style it.
If you want to style the name of the sidebar, you can use the class 'sidebar-name', in this case:
.sidebar-test-wrapper div.sidebar-name { /* some css here */ }
.sidebar-test-wrapper div.sidebar-name h3 { /* some css here */ }
.sidebar-test-wrapper div.sidebar-name .sidebar-name-arrow { /* some css here */ }