I have a plugin which outputs a profile section, and I plan to wrap it with an ol>li element. I want to style the list numbers using a different font size/style/color. But if I do that the font style will propagate/cascade into the profile. I don't want to restyle every text inside the profile again. So is it possible to prevent the font style from propagating into the descendant elements?
<style>
#rank li{
font-size:50px;
font-style: italic;
font-family: serif;
font-weight: bold;
width:70px;
margin-right:10px;
text-align:center;
}
</style>
<ol id="rank">
<li>
<div class="profile">
<!-- contains complex stuffs including tables, floated div for displaying profiles-->
</div>
</li>
</ol>
EDIT:
Sorry, I over exaggerated about 'restyling every text again'. I think if I need to make profile style unaffected again, I would need to know the default font styles outside the ul, and apply them in the div. It's not much work, but in the future, one need to modify two places to keep the overall style consistent.
Sorry, but no. All font properties cascade (the "C" from CSS) into all child elements and there is no way to prevent it. You're going to have to reset the properties on the child elements if you don't want the same font.
One thing you can, potentially, do is not actually change the font on the <li>, but on a container near it. This will only work in newer browsers, if it works for you, great :) :
ol {
list-style-type : none;
}
ol > li:before {
content : counter(list_counter) " ";
counter-increment : list_counter;
float : left;
font-family : verdana;
}
ol:first-child {
counter-reset: list_counter;
}
You could "reset" the font style on all child elements. It's not actually resetting but it should work with the universal selector. But be carefull since this will actually enforce the font on all child elements, so if you selector is more specific than others it might in the end still affect other elements.
Check this fiddle for an example: http://jsfiddle.net/79ZK5/1/
As I understand this is related to the selector priority that you can use to override the style. Have a look here to understand the Priority of Styles. If you specify the style in your html that would get the highest priority.
Related
#who {
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
color: white;
background-color: #f91845;
position: absolute;
display: inline-block;
transform: rotate(-40deg);
top: 200px;
left: 300px;
}
<div id="who">
<h1 class="tlt">Who am I?</h1>
</div>
I also tried the below one because the one above is not working:
h1:first-child{
font-size: 70px;
}
Please let me know why the font isn't changing? If I use h1:first-child, the font is getting applied to all h1 elements.
try
.tlt
{
font-size:70px!important;
}
The browser applies two sets of CSS to the page: the user agent styles (the browser “defaults”) and the author styles (yours).
The user agent styles set things like heading font sizes. These target the <h1> directly and set a font size, usually about 2em.
Your styles target the parent element #who. Some properties, such as the font properties inherit down the DOM to the <h1>, but declarations that target the <h1> directly will override those inherited values. The User Agent styles are targeting the <h1> are doing this.
If you want to override the user agent styles, you need to target the <h1> as well. This is why something like this works:
h1 {
font-size: 70px;
}
See, h1 is inside div of id who. Now, if you set font size of #who div then h1 should have it's font size but in the application there would be some font-size of h1 already defined; so it would override #who div's font-size.
h1:first-child
This will target all first child of any other containers. So, ideally this won't be a right method.
#who h1{font-size:70px;}
This would do solve your problem.
Now if you wanna target first child h1 of #who div then use following css
#who h1:first-child{font-size:70px;}
Because if your code is exactly what you have posted you dont use id selector in your css.
for more information please read
W3 CSS Selectors
According to updated question:
Applying to all h1's is also related to that
since you are not referencing h1 inside 'who' id it selects all of them. Because every h1 is first child of another element
Can you please change
h1:first-child
to
#who h1:first-child
Suppose I have no choice but to use absolute font-size value, e.g. font-size: x-large;. According to many articles, the exact font size of such an element depends on user's preferences. My question (maybe silly) is: can I force some custom value instead of user's preferences as a base?
E.g. I have a given HTML document with absolute-size values, and I want to render it inside of an iframe (under same domain) with some configurable value as a font base. So that elements with font-size "x-large", "medium", "small", etc. change their real font size according to this base value. It might be useful e.g. just to demonstrate how these font values work. Can I achieve this at all? And how? Maybe there's a specific property in window object like "window.fontSizePreference" - who knows...
If an absolute value has already been declared, and you want to simply replace it using a length value, you have a few options.
Possible Solutions
Override the CSS by being more specific. If your code is declaring the value using:
div.xlarge {
font-size: x-large;
}
You could add another CSS selector to target that div, and CSS would use the more specific of the two values. For example, you could add body or the parent container:
body div.xlarge {
font-size: 12px; /* This would overwrite the x-large value above */
}
div div.xlarge {
font-size: 12px /* So would this */
}
.parentclass div.xlarge {
font-size: 12px; /* And this */
}
For the sake of the example, I'm using a div with a parent div and a parent with the class name of .parentclass. You could also use span, p, li, ul, a, etc.
Note: Learn more about Specificity from MDN.
You could also add styling inline to the desired target. For example, if your HTML is:
<div class="xlarge">My Text</div>
You could add inline styling like so and it would override the font-size CSS declared value:
<div class="xlarge" style="font-size: 12px;">My Text</div>
The last thing I'd recommend, is using the !important tag to override CSS values you couldn't otherwise target using the above methods. Assuming there is no other !important declarations, the last !important will force the CSS value.
div.xlarge {
font-size: 12px !important; /* Will override more specific CSS & Inline CSS */
font-size: x-large; /* Would be ignored */
Note: Learn about using !important from CSS-Tricks.
IFrames
None of these solutions will work with just CSS if you are trying to edit an iframe, unless you have control of the iframe content. For editing iframe CSS, just do a quick search on Stack Overflow and there are a number of solutions.
My main HTML formatting is controlled by the
<P>
tag.
My application is dynamically constructed HTML using HTML fragments stored in a database, and block of text are encapsulated in tags, and thus pick up the default CSS styling for the tags. However sometimes erroneous extra tags get inserted like tags which will then negate the styling. The problem is that these extra tags could be anything, so it is difficult to construct a rule for every scenario. So what I need is a CSS rule that will apply to any text within it regardless of other existent tags.
So normal situation:
<style>
p {font-family:arial}
</style>
<p>this would render as arial</p>
<p><span>problems here</span></p>
<p><span style="font-family:calibri">problems here definitely, need to have paragraph rules imposed here ie overrule span font rule</span></p>
So I would like to know how I can get the paragraph CSS rule to overrule all child tag css rules.
Possible?
Thanks in advance.
/* Any tag inside p */
p * {
font-family: Arial !important;
}
If you know specific tag, like span, then
p span {
font-family: Arial !important;
}
inheritvalue reference
Test page
This has the advantage that it will inherit any font properties which are set by the parent element thus p. The !important is only needed when it concerns inline styles to be able to overide it.
All properties
p * {
font: inherit !important;
}
Or specifically one property
p * {
font-family: inherit !important;
}
Try this;
p {
font-family: arial;
}
p * {
font-family: inherit !important;
}
jsFiddle
NOTE: IE 7 or minor versions do not support inherit value
I don't know what this technique is called, I've only seen it used. It's a way to repurpose the same selectors with CSS.
For example if I create
h1 {
font-size:18px;
color:#FFFFFF;
font-family:Arial, Helvetica;margin:0;
padding:0;
}
h2 {
font-size:18px; color:#000000;
font-family:Arial, Helvetica;
font-weight:normal;margin:0;
padding:0;
}
I can repurpose the h selectors with something like
.whatever h1 {
color: #000;
font: 2.0em arial, sans-serif;
background-color: #fff3ea;
margin: 50px 0px 0px 50px;
}
.whatever h2 {
color: #000;
font: 1.7em bold arial, sans-serif;
background-color: #fff3ea;
margin: 25px 0px 25px 75px;
}
If h1 and h2 appear inside of a div called whatever, then they will assume those properties. You can do this with ID tags and class tags but I can't for the life of me remember how this is done.
Any thoughts?
This is called specificity.
It's a key feature of CSS which means properties in the more specific selector (.whatever h1) will override properties in less specific ones (h1). It allows you to set general styles for most of the elements on the page (e.g. all h1 elements), and then change the properties of a small subset of those elements using a more specific selector that identifies, for example, only the h1 elements inside another element whose class is whatever:
HTML
<h1>I'm green with envy</h1>
<h1>And so am I</h1>
<div class="whatever">
<h1>Because I'm rather special</h1>
</div>
CSS
h1{
color: green;
}
.whatever h1{
color: blue;
}
RESULT
The CSS selector .whatever h1 means "any h1 element inside another element with a class of whatever". You could also give the h1 element its own class to achieve the same effect; you just write the CSS slightly differently to reflect the fact that the h1 element you're targeting now has its own class:
HTML
<h1 class="whatever">I'm special</h1>
CSS
h1.whatever{
color: blue;
}
Always try to give your classes and IDs meaningful names that refer to the element's role within the page, rather than its colour or other attributes. i.e. It is much better to use ".introduction" instead of ".bigredtext" or ".whatever". That way, if you change the colour of your intro text to bright blue, you don't have to rename the class in your CSS and HTML, and everything in your HTML will read better too. (This is what people are talking about when they mention "semantics" and "semantic naming conventions".)
How specificity is determined (simple rules to remember)
User agents (web browsers) use a formula to calculate how specific each selector is and which should take precedence over the other. In very simple terms, from less specific to more specific:
Selectors with only the name of the element (e.g. h1) are the least specific of all
Selectors with a .class are more specific than selectors with no class
Selectors with an #id are more specific than selectors with a .class
Selectors lower down in a stylesheet take precedence over earlier identical selectors
Those are the four main rules worth learning about specificity, and they will cover most simple use cases. These two additional rules aren't related to specificity, but they're worth knowing too:
Inline styles such as <h1 style="color: blue"> will take precedence over external rules declared separately in external stylesheets or inside <style> tags. You probably shouldn't use inline styles, but it's worth knowing this just in case you come across them.
Properties within a selector that use the !important flag "trump" everything and can't be overruled. Likewise, you probably shouldn't choose to use the !important flag, but there are times when you may be forced to.
How specificity is really determined (how to calculate it precisely)
Of course, it gets a little more complicated than the above (but not by much) when you start chaining classes, IDs, and elements together, which is why it can be helpful to learn how to calculate specificity precisely rather than working on intuition alone, as it will save you a lot of time when your stylesheets get bigger and more complicated.
If you'd like to learn more, Smashing Magazine has a piece titled "CSS Specificity and Inheritance" that's worth a look. They reference Andy Clarke's famous Star Wars Chart, which might be an easier way to visualise specificity if you're familiar with Star Wars, but it will probably just make things even more confusing if you're not! (Click the image below to read more on Andy's site.)
You faced overriding the selectors.
example:
<div class="one">
<div id="two">
<h1> This is H1 text </h1>
</div>
</div>
so you have set H1 to FFF - white color by:
h1 {
color:#fff;
}
now we do first override ( using ID ):
div#two h1 {
color:#888;
}
and the third, notice you don't have to put current element, you can set it for each element with given class:
.one div#two h1 {
color:#000;
}
so in the end we have black text color.
The raw ones are to set "global" styling. The nested ones are to give exac styles to given elements.
Also you can use chaining class/id selectors for <div id="one" class="two three four"> you can select it using div#one.two.three.four - without spaces
I want to override another style sheet and set the float for all elements to none. If I use 'div, span, a' as the selectors or even 'body div, body span, body a', it doesn't override the previous class selector. I could use !important but this isnt great for obvious reasons.
.class {
float: left;
}
/* my overide */
div, span, a {
float: none;
}
Note- in the code ive only shown the class of 'class', but actaully their are many classes and id's.
Is there a way to do this without using !important? The reason im doing this is im mobile optimizing my site with media queries. I need to remove absolute positioning, floats, etc for all elements, but then i will want to add some of these styles to specific elements.
Thanks
As I wrote in my comment above:
Using the * selector is generally ill-advised. Selectors focus on the
key selector first (the right most selector) and so using the *
selector means that the browser must find all elements on the page.
This is a huge performance issue.
You can read more in this answer: (why) is the CSS star selector considered harmful?
Rather than using the * selector as you have, I'd stick with targetting the elements you want to affect, specifically.
Chances are, there will only be a few types of elements in your page that are floating.
These are usually some divs, perhaps some images, a list or two?
div, img, ul, ol{
float:none;
}
If there's a few more you can include them also.
#jdin; for overide the .class float just write like this:
div.class, span.class, a.class {
float: none;
}
EDIT:
Define an ID in your body tag like this
HTML:
<body id="home">
<div>Tag</div>
<span class="class">Class</span>
<div id="id">ID</div>
</body>
CSS:
body#home *{background:pink;border:1px solid #000}
Check this example http://jsfiddle.net/sandeep/D7Sg6/2/