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.
Related
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.
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.
What does it mean if the style is missing inside the css rule? It also has no effect on the element.
There's an empty CSS rule in firebug. I know that if a certain style is overwritten, the style is crossed but I'm not sure what it means if the style is missing inside the css rule. I created the rule to affect the padding-top for the element below.
<div id="leadspace-head" class="alternate">
<div id="leadspace-body">
<ul id="navigation-trail">
<li>test</li>
</ul>
<h1 class="small">Title for this page</h1>
</div>
</div>
Here's the scenario. I have 3 css rules below for the html code above. The first one is inside the body and the other 2 rules can be found in the css file. The 2nd rule overwrites the 3rd rule. I added the 1st rule to overwrite the 2nd rule but it has no effect and shows empty rule in firebug.
CSS within body
.landing-page #leadspace-head.alternate #navigation-trail + h1 {
padding-top: 9px !important;
}
CSS in mystyle.css
.landing-page #leadspace-head.alternate #navigation-trail + h1 {
padding-bottom: 10px;
padding-top: 9px;
}
.landing-page #leadspace-head #navigation-trail + h1 {
padding-top: 5px;
}
Your styles seem to be overriding each other a lot. You may want to investigate ways in which you can get better use of the inheritance rules in CSS.
That aside, try re-writing your rule to this:
#navigation-trail h1.small { padding-top: 9px; }
That will specifically target those H1 elements that fall under your #navigation-trail list element.
I'm having some issues with the CSS "hierarchy" (not sure if it's proper to call it a hierarchy). I'm trying to style the below bit of HTML.
<body>
<section id="content">
<article>
<ul class="posts-list">
<li class="post-item">
<h2>[post title]</h2>
<p class="item-description">...</p>
<p class="item-meta">...</p>
</li>
...
</ul>
</article>
</section>
</body>
Since section#content changes on every page I have, I wanted to maintain consistent styles across all of them, so I wrote some "global" CSS rules.
#content {
color: #000;
margin-left: 300px;
max-width: 620px;
padding: 0px 10px;
position: relative;
}
#content p,
#content li {
color: #111;
font: 16px / 24px serif;
}
I wanted to style HTML within a ul.posts-list differently, so I wrote these rules.
li.post-item > * {
margin: 0px;
}
.item-description {
color: #FFF;
}
.item-meta {
color: #666;
}
However, I ran into some issues. Here is how Chrome is rendering the CSS:
For some reason, the rules #content p, #content li are overriding my rules for .item-description and .item-meta. My impression was that class/id names are considered specific and thus higher priority. However, it seems that I have a misunderstanding of how CSS works. What am I doing wrong here?
Edit: Also, where can I read up more about how this hierarchy works?
Elements id have the priority in CSS since they are the most specific.
You just have to use the id:
#content li.post-item > * {
margin: 0px;
}
#content .item-description {
color: #FFF;
}
#content .item-meta {
color: #666;
}
Basically id have the priority on class which the priority on tags(p,li,ul, h1...). To override the rule, just make sure you have the priority ;)
The "hierarchy" in which CSS rules are measured is called specificity. Each part of a CSS rule has an actual numerical base-10 value. IDs are worth 100 while classes are only 10.
For more information see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Targeting ID's is more specific than targeting classes. More specific styling will overwrite less specific styling. It should be noted that in-line styling in HTML is more specific and will therefore overwrite ID-targeted styling. In other words:
<p style="color:white" id="itemDescId" class="item-description">...</p>
With the CSS:
p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}
The text will appear white - not because it's closest to the html code, but because it's higher in the specificity hierarchy. If you remove the inline styling (and you normally should for cleaner more manageable code), then the text would become red. Remove the ID and it will be green. And finally it will be blue once the class is removed.
This is one of the more complex topics to understand in CSS, and I'm only scratching the surface, but the easiest description I've found on how CSS specificity works is over at CSS tricks:
http://css-tricks.com/specifics-on-css-specificity/
My response should have been a "comment" on the answer, but I have the correct fix although #tibo answered correctly:
li.post-item > * {
margin: 0px !important;
}
.item-description {
color: #FFF !important;
}
.item-meta {
color: #666 !important;
}
The !important rule will override the order of evaluation between id and class.
Here is a link to an article, When Using !important is The Right Choice, that will help you to understand... it made my life easier :)
Better to follow the CSS standards.
choose css selector and makeit under its parent then u may not to get conflicts when loading css fles (like .css files)
I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....
I have HTML like:
<ul id="main_navigation">
<li id="trigger0"><a /Topics">Webinar Topics</a>
<ul class="subNavMenuItems" id="subNav0">
<li>Intro</li>
<li>Computer Skills</li>[and so on]
In my css i have:
#main_navigation ul{
margin: 0;
padding: 0;
float: left;
width: 20%;
font-size:13px;
font: bold;
font-variant: small-caps;
}
the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.
You probably want
font-weight: bold;
Try this:
#main_navigation li {
...
}
I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.
Also, missing a double quote in <a /Topics"> and the href attribute.
#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.
Ben has a good suggestion with trying the Firebug addon for Firefox.
This HTML is invalid: <a /Topics">Webinar Topics</a>. You want Webinar Topics most likely.
What element are you trying to style?
#main_navigation ul {
/* css here */
}
Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?