I always modify Bootstrap by including my custom stylesheet after the Bootstrap one, in this particular case, like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mainstyle.css" rel="stylesheet">
I have a list on the site, some of whose elements also have the class advanced-only.
The list elements have the style in Bootstrap:
.nav > li {
position: relative;
display: block;
}
And the advanced-only class in my custom stylesheet has:
.advanced-only {
display: none;
}
There are other styles such as color and border but they are not relevant here. As you see, the advanced-only elements should be hidden when the page loads, but they are displayed. When I inspect one of these elements, I see that the .advanced-only style is crossed out and the .nav li style from Bootstrap is active. When I deactivate the Bootstrap one from there, then the custom one activates and all is well.
Also, when I do
.advanced-only {
display: none !important;
}
it hides it like it should. However, this would interfere with a bunch of Javascript code (for example, show() and hide() won't work properly with !important elements) so I would like to understand why Bootstrap is overriding the custom style and what I can do about this.
The HTML looks like this:
<ul class="nav nav-sidebar">
<li>
<a>Pending Actions</a>
</li>
<li class="advanced-only">
<a>Hidden stuff</a>
</li>
</ul>
That is because the specificity of your selectors are lower than the Bootstrap selectors. Strongly suggest you reading http://www.w3.org/TR/CSS2/cascade.html#specificity.
The specificity is calculated based on many factors, not just by the order of definition.
For example, this selector .nav > li has an attribute selector and a tag selector, while your rule .advanced-only has only an attribute selector. So your rule is not making affect. Try to make your selector more specific when giving customized styles.
This is because bootstrap's styling is more specific than your custom styling.
To fix this you need to add a more specific selector, e.g:
nav .advanced-only {
display: none;
}
For more reading on CSS Specifity check out this link.
Related
<div class="col-lg-3">
<ul class="nav navbar-nav login-right">
<li>Login or create account</li>
</ul>
</div>
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
I tried to give normal class to each link and just to call that classes in external CSS file but solution fails.
Any idea?
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
You can use nth-child and color both a tags differently
ul.nav li a:nth-child(1){
color:green;
}
And
ul.nav li a:nth-child(2){
color:blue;
}
Since both have the same padding style you can place it in a common style definition
ul.nav li a{
padding:0;
}
Important: make sure the external file which you write this in is placed last in your HTML hierarchy. By CSS prioritisation rule the file placed last in the hierarchy gets the priority.
Edit: seems like you have many elements with same structure. In this case it's better to select specific element and using id will be our best choice. Add id to your ul as below
<ul id="colorMe" class="nav navbar-nav login-right">
And change your CSS selectors to
#colorMe li a:nth-child(1)
Do similar to other selectors too
I'd like the app I'm making to use a reset.css at the global level. I'd also like it to penetrate all shadow roots but have low specificity. How can I accomplish this?
Let's say my reset.css contains something like:
li, ::shadow li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then my custom element has a template like:
<template>
<style>
li {
padding: 10px;
}
<style>
<ol>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>
</template>
My issue is the template's li selector doesn't have enough specificity to beat ::shadow li. I don't want to have to repeat myself in every custom element. I think I could add a <link> to each <template> but then I'd be repeating myself again. I could also have JavaScript inject the <link> but I'm not sure that's the best way.
What are some other ways I could use a reset.css that penetrates shadow roots but has very little specificity?
I understand that post deprecation of ::shadow and /deep/ selectors this question might not be valid anymore, but if you are still facing this issue, then I would suggest you to use css #imports to inject your common reset.css in shadow-root template.
Since it has to be first tag inside template, your inline stylesheet will take precedence over reset.css, where ever applicable.
I have written an answer here on same topic and one here to inject those #imports at runtime if you don't want to repeat it yourself for each template. Probably it will be work out for you.
I'm looking to style a li element, and would like to modify this CSS property:
li:before {
color: blue;
}
However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.
Is what I am trying to do, doable, and, if so, how?
You can insert a new stylesheet inline with the following HTML:
<style>
li:before { color: red; }
</style>
The reason this is the only way to do it is that :before is a pseudo-element, meaning that it doesn't actually become part of the DOM. Unfortunately, this means there is no way to style it inline, as requested.
As an example:
<li style="color: red;">text</li>
would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.
In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-
<li style="color: red;">This is a list item</li>
And it would take precedence over either a linked stylesheet, or an internal stylesheet.
If you're wanting to use more complex selectors, you're out of luck unfortunately.
See: CSS Pseudo-classes with inline styles
You can add:
<style scoped>
li:before {
color: red;
}
</style>
Anywhere as a direct child of the <body> element and it will apply to the whole page, while also being valid HTML5.
I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.
I'm creating a navigation bar and its made using an unordered list. I want to override my style for the first one so it looks different. I tried changing its class, but the actual style overrides it. Thanks
CSS is order-sensitive.
If you define the styles for the first element, and then define the styles for all elements, then the styles for all elements will take precedence, even for the first element.
Alternatively, if you define the styles for all the elements first, and then define the styles for the first element, then the styles for the first element will take precedence over the styles for all elements when the browser gets around to figuring out how to render the first element.
In the style declarations, use !important, like this:
.myFirstOne {
color: blue !important; /* for example */
}
Make sure you put the !important last. Is there a way you can factor the attributes out of the style attribute and into a class? That would be a cleaner and less tedious way of doing it, as !important must come after every declaration.
See this link for more information on CSS cascading rules.
I don't perfer using !important I'd rather put a class on the first element and style it as such:
<!-- html -->
<ul>
<li class="first">first item</li>
<li>second item</li>
<li>third item</li>
</ul>
/* css */
ul li {
color: blue;
}
ul li.first {
color: red;
}