Basic CSS - why my 2 class selector doesn't override 1 class + tag?

Question

Please don't answer me by just pointing to a "Specificity Explained" site, as I've already read a lot on that, at this stage I need someone to explain why my selector isn't taking precedence.

I'm simply trying to override the following Site.css selectors:

.dl-horizontal dt {
  float: left;
  width: 43%;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9em;
}
.dl-horizontal dd {margin-left: 45%;font-size: .9em;}

With this (directly on the web page):

<style>
        /* Using 2 classes so specificity overrides site.css "dl-horizontal dt" */
        .gwx_override .gwx_dt2 
        {
            width: 25%;
        }
        .gwx_override .gwx_dd2
        {
            margin-left: 27%;
        }
</style>

And the HTML that is rendered is like this:

<dl class="dl-horizontal">
<dt class="gwx_override gwx_dt2">Notes</dt>
<dd class="gwx_override gwx_dd2">Once more rejecting this tag.</dd>
</dl>

What I'm trying to accomplish is that I want most of the "dl-horizontal" from the site.css to apply, except for the width and margin-left tags. But the browsers I test with (Firefox and Chrome) are always choosing "dl-horizontal" over my "gwx_override gwx_dt2".

The browser's inspectors are applying ".dl-horizontal dd", which is specificity 0.1.1, while my specificity is 0.2.0 - shouldn't mine "win"?

What perplexes me is that the browsers don't even show my selectors in the list of "Rules" (like when they show a selector crossed-out as having been overruled), so I thought I must have mal-formed CSS. But I've plugged my CSS into a couple of validators and they say I'm good.

Here is the top of the page, to see the context of my selectors and were Site.css is referenced. This is the rendering of an ASP.NET webform:

<html class="no-js" lang="en">
<head id="hdMain"><meta charset="utf-8" /><title>
    Tag Confirmations
</title><meta name="author" content="na" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="google" content="notranslate" /><link rel="shortcut icon" href="../Resource/img/favicon/favicon.ico" />
    <style>
        .gwx_dt
        {
            font-size: 1.1em;
            text-align: right;
        }
        .gwx_dd
        {
            text-align: left;
        }
        /* Using 2 classes so specificity overrides site.css "dl-horizontal dt" */
        .gwx_override .gwx_dt2 
        {
            width: 25%;
        }
        .gwx_override .gwx_dd2
        {
            margin-left: 27%;
        }

    </style>

    <script src="/Resource/js/libs/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/Resource/js/libs/jquery-1.8.2.min.js"><\/script>')</script>
<link href="../App_Themes/Default/css/bootstrap.min.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/Default/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/Default/css/button.min.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/Default/css/font-awesome.min.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/Default/css/Site.css" type="text/css" rel="stylesheet" /><link href="/WebResource.axd?d=dhMRE7UEy7H080vdET4SQ5gaXv3yKJxFKjw0WJwjMOJXb_3uiqKz9iCutRYXNgczGznC3Qji1bVmCcREwl3gmsg89VoYWHoI5c1ffKReC3pa3UBDEov8wgpZH1tZNKBOHQZdm83u3WzAOZRlifWwtA2&amp;t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=yO7Hnfif15zu3ajS_Kv2hIZOq3KB4gvK7aVCCwgBWFENha719NSIfzrGlrQmOaMbT8haRIkp-BPrOzfsg4dlULpKvYjYf3zDPnkD0cYbLIxpUFaZYBVOqIErAAKOOl9gU2z91bzHaLJALgMqeYlZuqhaA4YlMWbxsM2WvZG7MFM1&amp;t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=M9dREq2pa3GD5R-MuoMAJO7TmjJQI86OXZMFLhRqz_lACLMSoj31CToFGgrCmBuC8hR-6n8Nsb78eYTdJebJ3vh71y1K0SEw9iq8oSh4pZJNt7iaAn0jOyUXAY3zQnWTronjbqmiQZPuoWnBJ3moKA2&amp;t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=SLj6-zA4DTwqZ1ti9zYnP0U_Uz8SW1QJifMiNIveIpk6-jnuMHgIJbfScDBCpKbHN1hzAXHzgveilPMaHHpJ1MYssBokKNa0ILKEVLsKQIEIb-bkabQM2bFQI77lHSkWKcRGgFkFIgGxlG8Fa0prPdMgwjs4lr3lDFP2G7vb7ZY1&amp;t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />
</head>
<body>

can you try with this `.gwx_override .gwx_dt2 { width: 25%!important; } .gwx_override .gwx_dd2 { margin-left: 27%!important; }` — sanoj lawrence, Apr 23 '20 at 18:10

connexo · Accepted Answer · 2020-04-23T18:19:40.463

Your problem is not specificity.

Your problem is your selector does not match the elements you want to target. (which you noticed yourself)

What perplexes me is that the browsers don't even show my selectors in the list of "Rules" (like when they show a selector crossed-out as having been overruled)

.gwx_override .gwx_dt2

targets elements with the CSS class gwx_dt2 which are descendant of an element with CSS class gwx_override. The space character in CSS does have a meaning: it is the descendant selector.

That is not what you want, given the HTML you showed. Instead, what you want is

.gwx_override.gwx_dt2

(notice the missing space between the two class names). That selector targets elements that have both classes.

I need someone to explain why my selector isn't taking precedence.

It doesn't target what you want it to target, so specificity is not an issue here.

Darn, I knew it must be something simple, I feel like such a noob! I've been programming windows and "backend" stuff for years, but I've found learning web front-end and especially CSS really counter-intuitive. — JoeBlack23, Apr 23 '20 at 18:33

Basic CSS - why my 2 class selector doesn't override 1 class + tag?

1 Answers1