2

I want to use a class. The problem is I have two CSS files containing that same named class one in first.css and another in second.css my order of linking the css files is like this:

<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="adminlte.css" />

adminlte.css is used for my interface but I like the look of the bootstrap forms. Whenever I call the class form-control it is styled by adminlte.css.

How can I call the class form-control but use the one from Bootstrap?

Note: I cannot switch the order of linking the css files.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
blur
  • 79
  • 1
  • 9
  • 1
    if you cant change the order then it will always use the 2nd styles, thats how it works. – Dirk Jul 20 '18 at 16:10
  • 1
    Look at "[What does `!important` in CSS mean?](https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean) on this very site. – AlexP Jul 20 '18 at 16:10
  • sounds like you have some fundamental css architecture issues. do you or do you not have control over the css? – random_user_name Jul 20 '18 at 16:20
  • what is the reason to have the same class in two files? What is the purpose of the two different files? – Lelio Faieta Jul 20 '18 at 16:28
  • Delete the class from adminlte.css... – Heretic Monkey Jul 20 '18 at 16:55
  • Possible duplicate of [How Can I Override Style Info from a CSS Class in the Body of a Page?](https://stackoverflow.com/questions/5382254/how-can-i-override-style-info-from-a-css-class-in-the-body-of-a-page) – Heretic Monkey Jul 20 '18 at 17:03

3 Answers3

2

You cannot specify which version of a class rule to use except by load order or by specificity. Since Bootstrap uses standalone (not nested or stacked) selectors, you can't compound class selectors to increase specificity. This leaves local overrides as your only recourse.

Grab the CSS block from the library file and drop it into your document using a style tag:

<style>
    .form-control {
        ...
    }

</style>

Embedded styles override linked stylesheets, so even though the selectors are identical this one takes precedence.

isherwood
  • 58,414
  • 16
  • 114
  • 157
-1

Would @media queries eliminate the need for two stylesheets?

@media only screen and (max-width: 768px){
    #my_div{
        /* style */
    }
}
@media only screen and (min-width:769px){
    #my_div{
        /* style */
    }
}
Paddy Hallihan
  • 1,624
  • 3
  • 27
  • 76
-1

As you written one question below your main question about !important if you see this thing in second css which is overwriting your first one.

Because !important will always overwrite normal css.

as you didn't mention exact thing i will suggest you to take first link after second one and which element css you want to apply give that properties !important like below example. below given is just example not your exact need it's just to explain you how it works.

.example{
    font-size: 16px !important;
    color: red !important;
}
dipak harishbhai
  • 84
  • 4