being quite an old theme, Twenty Eleven loads the stylesheet in header.php with this line:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
this actually loads the stylesheet of the activated theme (the child theme).
when you use the typically suggested code in functions.php of a child theme:
//enqueue parent theme style.css//
add_action( 'wp_enqueue_scripts', 'twentyelevenchild_enqueue_styles' );
function twentyelevenchild_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
this unfortunately loads the parent style.css later after the child theme style.css, making overwriting CSS using identical selectors virtually impossible.
two ways around it:
– either editing header.php in the child theme, and changing this line to:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>" />
to load the parent theme style.css,
and changing the enqueuing code in functions.php of the child theme to:
//enqueue child theme style.css//
add_action( 'wp_enqueue_scripts', 'twentyelevenchild_enqueue_styles' );
function twentyelevenchild_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
– or editing the enqueuing code in functions.php of the child theme to load the child theme style.css after the parent theme style.css:
//enqueue parent and child theme style.css//
add_action( 'wp_enqueue_scripts', 'twentyelevenchild_enqueue_styles' );
function twentyelevenchild_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
this unfortunately loads the child theme style.css twice (once from the code in header.php and the second time from the enqueuing), but should solve the problem with oversriting styles.