1

I am facing a really weird issue currently, I am working on a massive project in terms of size, with many html/js/etc files, but I am sharing one css file that's common to most of them. In one of my files, I was trying to add the following css:

.smallerDatetime {
    width: 160px;
}

A very simple style that shouldn't have any issues, and then I added it to my controls:

<input id="toDate" type="text" class="form-control datetimeController smallerDatetime" placeholder="To">

Initially, this didn't work. I was curious if somehow there was an issue of the rule not being loaded, but on my browser's dev mode I saw this:

elements, width is stricken out

From this point, it was clear that the CSS rule was being loaded. Then I started to wonder if what I knew about classes (Where the right-most class usually overrides the ones to its left) was wrong, and I tried:

<input id="toDate" type="text" class="smallerDatetime form-control datetimeController" placeholder="To">

Which expectedly didn't work either. Later on, I tried the following:

<input id="toDate" type="text" class="smallerDatetime form-control" placeholder="To" style="width:160px">

which surprisingly worked, but then it made me more confused. It was clear that the rule was being loaded (especially as the css- is handled and imported server-side, and after clearing the cache it was very easy to verify it was updated), but somehow not applying. What can I be missing here?

I tried to look around existing answers, but most of them had an issue with the formatting, or other issues with the rules themselves, but in this case I know the rule works since it is fine in the style. And all other rules in the css and the same html file work fine.

Zaid Al Shattle
  • 1,454
  • 1
  • 12
  • 21
  • 1
    See https://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css on how css cascading works which will totally solve your problem. Very short tl;dr: more specific selectors (e.g. `.form-inline .form-control`) are stronger then less specific ones (`.smallerDatetime`). – Fabian S. Oct 15 '21 at 07:59
  • 1
    @FabianSchöner Thanks, let me take a look – Zaid Al Shattle Oct 15 '21 at 08:00
  • 1
    Also see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for some examples. And from years of experience developing css. DO NOT start using `!important`, it will haunt you at night when youre asleep. – Fabian S. Oct 15 '21 at 08:02
  • I see the issues of specificity, first time I've seen that, but you learn something new everyday. What I am still trying to figure out right now is the best way to make my class work, since I would rather avoid in-line styles. – Zaid Al Shattle Oct 15 '21 at 08:02
  • 2
    It is not about the left or right class. The more stronger reference the more priority. – Zain Oct 15 '21 at 08:06
  • Gotcha @Zain, I should spend some time studying that topic more in depth to avoid further misunderstandings in that topic. – Zaid Al Shattle Oct 15 '21 at 08:07

1 Answers1

4

Your selector .smallerDatetime is less specific than .form-inline .form-control. Therefore its properites are overwritten.

To make your selector more specific, just make it more specific:

E.g. .form-inline .form-control.smallerDateTime.

To make it more clear, more specific doesnt imply you repeat the initial selectors.

body .content form.myform .form-group .smallerDateTime is also more specific than .form-inline .form-control while it doesnt mention one of the initial classes at all.

PS: Don't use !important. Why? Here's why: What are the implications of using "!important" in CSS?

99% of the cases you can ditch using !important just by properly cascading.

Fabian S.
  • 2,441
  • 2
  • 24
  • 34
  • 1
    This has solved the issue, Thanks! Its embarrassing how after spending a while learning and applying different technologies, some basic knowledge like this can just elude me... Cheers buddy. – Zaid Al Shattle Oct 15 '21 at 08:04
  • 1
    @ZaidAlShattle you may accept the answer using the arrow to indicate the question is solved and tell future visitors what solved it. – Fabian S. Oct 15 '21 at 08:09
  • 1
    Yea, but Stackoverflow doesn't let you accept an answer until 15 minutes pass since the question is posted, Needs a minute longer haha – Zaid Al Shattle Oct 15 '21 at 08:10