CODEWITHSUNDEEP
htmlcss
Justin Lucas
Justin Lucas

Reputation: 319

Stylesheet Importance

The problem: CSS custom style overrides not taking place.

The actual html:

<div id="tribe-events-tooltip-109-2019-11-01" class="tribe-events-tooltip tribe-event-featured" style="bottom: 71px; display: none;">

My current function for queuing the stylesheets:

function my_enqueues(){

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), null, 'all');

wp_enqueue_style( 'tribe', get_template_directory_uri() . '/wp-content/plugins/the-events-calendar/src/resources/css/tribe-events-theme.min.css', array( 'bootstrap'), null, 'all' );

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/style.css', array( 'tribe' ), null, 'all'); }

add_action( 'wp_enqueue_scripts', 'my_enqueues' );

Selectors referenced in Chrome Inspection:

.recurring-info-tooltip, .tribe-events-calendar .tribe-events-tooltip, .tribe-events-shortcode.view-week .tribe-events-tooltip, .tribe-events-week .tribe-events-tooltip {

What I add that does not work:

.tribe-event-featured{border: solid #567175;}

What I add that DOES WORK:

.recurring-info-tooltip, .tribe-events-calendar .tribe-events-tooltip, .tribe-events-shortcode.view-week .tribe-events-tooltip, .tribe-events-week .tribe-events-tooltip {border: solid #567175;}

I've tried this from multiple angles, likeso above with functions and another function that claimed would override all stylesheets. So far I can't get it to stick. It would appear it won't stick because of how many selectors are being referenced for this bit of CSS and thus it gains importance no matter in what order it is laid out. Unless I'm wrong?

I would prefer not having to add 10xxx selectors every time I want to make a small change to the theme. Nor do I want to put the custom CSS in the backend so it is implied inline in the code. Is there a solution that will actually work so that my stylesheet is considered the master style sheet and will always over write other plugins css no matter how many selectors the original css has?

Upvotes: 0

Views: 41

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

It's not a matter of how many selectors are added (as only one can apply to an element at a time), it's about the specificity of the selector.

Each of your class selectors add two 'points' of specificity, whereas the selector .tribe-events-shortcode.view-week combines two class selectors into one, and thus carries four points of specificity. The selector .tribe-events-week .tribe-events-tooltip also carries four points of specifity, but note the space here -- this denotes that .tribe-events-week is an ancestor of .tribe-events-tooltip.

When specificity results in a tie (as is likely your case), the rules override one another as they get applied in the DOM. As such, the last valid selector to get applied takes effect. Based on how you structure your HTML, this is likely in the last stylesheet that you load in the HTML.

Note that even when a selector is referenced earlier in the DOM, it will still take effect if it has more specificity:

.tribe-events-tooltip.tribe-event-featured {
  color: red;
}

.tribe-events-tooltip {
  color: blue;
}
<div class="tribe-events-tooltip tribe-event-featured">Example</div>

This can be seen when you inspect the element in the F12 Developer console (note the strike-through):

Specificity override

As such, you can simply chain classes (or other selectors) together to override the specificity. In this specific example I would try simply targetting .tribe-events-shortcode.view-week, and add additional selectors to it if necessary.

You can make use of the !important declaration to have an almost-certain way of ensuring that your styles always apply, but where possible, you should try to avoid doing so (as you could end up having the same problem when trying to override the !important declaration itself), and instead opt for improving the specificity of your selector.

Upvotes: 3

Related Questions