CODEWITHSUNDEEP
htmlcssgoogle-chrome-extensiongoogle-chrome-devtools
xAndrula
xAndrula

Reputation: 27

CSS property changes via chrome devtools but not via chrome extension CSS file

I'm trying to develop my first chrome extension to enable dark mode on a specific website. I have already made other changes that work, so it's the CSS that I'm missing out on something.

When I'm in developer mode and I change this on the website:

#content .side_navigationed.with_sheet>div:nth-child(2) {
  width: 735px;
}

To this:

#content .side_navigationed.with_sheet>div:nth-child(2) {
  width: 735px;
  background-color: red;
}

Then the CSS works and background is red. But when I pass this into the CSS file in my extension, it doesn't work.

The class itself has this name

<div class="overview tester">

But when I do this, nothing happens:

.overview.tester {
  background-color: red;
}

I found out that this has higher specificity, which is the reason that the background doesnt change.

#content>.side_navigationed.with_sheet>div:nth-child(2), #content>.login>div.content, #content>.reset_request>div.content, #content>.login_banned>div.content, #content>.country>div.content, #content>.email_changed>div.content, #content>.email_confirmation_required>div.content, #content>.quick_search>div.content, #content>.email_confirmation_sent>div.content, #content>.email_confirmed>div.content, #content>.email_delivery_failed>div.content, #content>.intro>div.content, #content>.intro_completed>div.content, #content>.welcome_back>div.content, #content>.replaced_club>div.content, #content>.season_update>div.content, #content>.training_result>div.content, #content>.blog_post>div.content, #content>.blog_post_comment>div.content, #content>.reply_to_blog_post_comment>div.content, #content>.edit_blog_post_comment>div.content, #content>.player_free_transfer>div.content, #content>.edit_blog_post>div.content, #content>.new_blog_post>div.content, #content>.new_matches>div.content, #content>.match_summary>div.content, #content>.rate_support_ticket>div.content, #content>.tactics_editor>div.content, #content>.admin_penalties>div.content, #content>.admin_matches, #content>.admin_orders, #content>.penalty>div.content, #content>.admin_transfer_price_regulations>div.content, #content>.image_uploads>div.content, #content>.appeal>div.content, #content>.admin_appeal>div.content, #content>.hire_employee>div.content, #content>.fire_employee>div.content, #content>.employee_change_job>div.content, #content>.player_bid>div.content, #content>.logged_rails_exceptions, #content>.logged_rails_exception, #content>.logged_js_exceptions, #content>.logged_js_exception, #content>.browser_outdated, #content>.admin_forum_posts, #content>.shop_choose_quantity, #content>.shop_payment_instructions, #content>.new_sms_subscription, #content>.paypal_cancellation, #content>.training_instructions>.content, #content>.training_statistics>.content, #content>.training_upgrades>.content, #content>.support_ticket, #content>.mobile_subscription_payment_failed, #content>.odds>.main, #content>.shoutbox_messages, #content>.admin_logins, #content>.admin_lookups_similar_clubs, #content>.admin_lookups_trades, #content>.admin_membership_changes, #content>.admin_transactions, #content>.admin_bannings, #content>.admin_new_banning, #content>.admin_lookups, #content>.player_comparison, #content>.admin_player_names, #content>.new_odds_event_result, #content>.odds_event_result, #content>.odds_events, #content>.new_odds_event, #content>.edit_odds_event {
    margin-top: 16px;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 25%);
    border-radius: 3px;
    background: #fff;
    padding: 6px 20px;
}

Upvotes: 0

Views: 62

Answers (1)

chraebsli
chraebsli

Reputation: 410

In the Mozilla Developer Docs is a good description about the CSS !important keyword, which orders your property to a higher priority: https://developer.mozilla.org/en-US/docs/Web/CSS/important

Upvotes: 1

Related Questions