CODEWITHSUNDEEP
semantic-ui
Aver
Aver

Reputation: 159

Problems with overridng Semantic UI styles

The question I have is how to override styles from semantic ui the easiest way? I compile semantic sheets and have some other css sheets which I made. For example I have container for columns and I want to hide it in the beginning so I added a class to the div and then set it to "display: none". But it still shows because some other styles in semantic are more important. It's very uncomfortable.How to fix it and set my own styles overriding semantic ones?

Upvotes: 1

Views: 2750

Answers (2)

Will
Will

Reputation: 4155

This isn't really specific to Semantic UI. You'll need to take a minute to learn about specificity in CSS. Happily there are plenty of good resources out there like Andy Clarke's Specificity Wars.

Armed with this information, load your browser's "Developer tools" and inspect the element you're having trouble with. In the CSS panel, you'll see all of the CSS applied to that element. Stuff toward the top has higher CSS specificity. More likely than not, you'll see your custom CSS with a line through it. That's telling you that the browser applied the style but something else overrode it. The something else will be declarations in the CSS panel that aren't displayed with a line thought it.

When you compare them, you'll likely notice (after reading Specificity Wars or similar) that the items without a strikethrough are using a more specific selector. Perhaps your CSS selector has only one class but the SemanticUI selector has two like .class-foo.class-bar—in that case, the SemanticUI selector will "win" the war.

There are a few ways around this but the easiest is to make your selector more specific (or have more 'weight' in Specificity Wars parlance). Again, there are several ways to do this as well but perhaps the easiest is to add an id to some parent/wrapping container since ids carry a lot of specificity 'weight'. Then, use that ID in your custom style selectors. 

<div id="my-wrapper"> 
    <div class="item"></div>
    <div class="some-other-item"></div>
    <!-- all of your HTML here --> 
</div>

Then, you can use the ID in your CSS:

#my-wrapper .item {
    color: I-Will-Beat-You-CSS-Library;
}

Upvotes: 6

megamaiku
megamaiku

Reputation: 434

While using ids and !important can solve the issue, in my case, the problem was that the declaration for semantic came after my custom CSS declaration (site.css), so it obviously took precedence. All I had to do was move my custom CSS declaration below semantic.css, and voila! that did the job for me.

Before:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link href="/Content/site.css" rel="stylesheet"/>
  <script src="/Scripts/semantic.js"></script>
  <link href="/Content/semantic.css" rel="stylesheet"/>
</head>

After:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <script src="/Scripts/semantic.js"></script>
  <link href="/Content/semantic.css" rel="stylesheet"/>
  <link href="/Content/site.css" rel="stylesheet"/>
</head>

Upvotes: 1

Related Questions