I often have this problem and am not sure of the most elegant solution. I don't want to use !important although that would work.
I have articles on my site which are contained in a div with the class article. The corresponding CSS controls the H4 tag like this.
.articles h4 {
font-size: 16px;
}
However within my articles I have a div element with the class notice which also has a number of H4 tags, but when I use this CSS below, the declaration from the articles class is applied instead.
.notice h4 {
font-size: 24px;
}
What I want is a solution that means I don't have to apply classes to the actual H4 tags in notice — I want to be able to point to H4 tags by their container element.
Assuming your mark up is something like this:
<div class="articles">
<h4> Article Title </h4>
<div class="notice">
<h4> Notice Title </h4>
</div>
</div>
As long as
.notice h4 {
font-size: 24px;
}
is below .articles in your css file it should work. However, another fix would be to use
.articles .notice h4 {
font-size: 24px;
}
You should try to target the class more specific. Try to use
.articles .notice h4 {
font-size: 24px;
}
You need to use the child selector. If your .article class is just a wrapper and the h4 element is a direct child of it, this is an easy fix. The child selector is widely supported.
.article > h4 { font-size: 16px; }
The child selector will not apply any of its styles to an element that is not an immediate ancestor. So if you have another h4 element in another wrapper, it will not have the styles of the one outside the wrapper.
Related
Here's the offending css:
ul.pricing-table span {
display:block;
font-size:40px;
font-weight:bold;
color:#222;
padding:30px 0;
line-height:1.3;
}
I attemped to fix it with:
<style>
.spans {
display:inline;
font-size:14px;
font-weight:normal;
padding: 0 0;
line-height:1;
}
</style>
Where the span looks like:
<p>This is more of a test <span class="spans" style="color: #e03e2d;">do red</span> and <span class="spans" style="color: #34495e;">do black</span></p>
No matter where I put the style block, before the link or after it still uses the style from the file. I thought that what I put in style blocks in the html overrode linked files. Obviously not.
I also tried various schemes of "initial" "revert" "set" none of which had any effect and most gave me errors.
First of all you don't provide the full HTML code, the issue isn't reproducible, so we need to make some assumptions. It's not about where you put your style block, what matters is selector specifity. When you select element with ul.pricing-table span selector, you select the <span> within the <ul> with pricing-table class. When you use .spans you select any element with class .spans, so the latter has lower specifity. Try something like ul.pricing-table span.spans instead of .spans and read this to deeper understand the point https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#:~:text=Specificity%20is%20the%20means%20by,different%20sorts%20of%20CSS%20selectors To quickly compare selector specifity you may want to use something like this https://specificity.keegan.st/
ul.pricing-table span {
display: block;
font-size: 40px;
font-weight: bold;
color: #222;
padding: 30px 0;
line-height: 1.3;
}
ul.pricing-table span.spans {
display: inline;
font-size: 14px;
font-weight: normal;
padding: 0 0;
line-height: 1;
}
<ul class="pricing-table">
<li>
<p>This is more of a test <span class="spans" style="color: #e03e2d;">do red</span> and <span class="spans" style="color: #34495e;">do black</span></p>
</li>
</ul>
This is a CSS specificity issue. Your selector (.spans) is composed of one class when the selector from the file (ul.pricing-table span) is composed of one class plus 2 elements. Unless you use !important which you shouldn't, where ever you put your CSS the "stronger" selector will always prevail. As an example you could change your selector to p > span.spans
So have my main style sheet that sets all the styles for my site. But I have a div that opens as menu. I need it to have it's own style and I can't have it or it's decedents inherent any styles from the main style sheet. But after I reset the style I'm then styling the div like it's a whole new element. I found the all: initial; rest the elements. and #we_gallery_edit_window > * sort of works. But when I try to declare the new styles some of the new styles won't take because of precedence. here is my code so far:
h1
{
color: #000000;
background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
all: initial;
}
.my_div_child h1
{
color: #F0F0F0;
}
<h1>Hello</h1> //Should be black with background
<div id='my_div'>
<h1 class='my_div_child'>Good bye</h1> //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background
I need a selector that will override everything above it but has no precedence over anything below it. So remove the style set by h1 in the main div, then reset h1 of .my_div_child. it's not just the h1 element I'm having trouble with but that's the easiest example I can think of.
Okay, after seeing the updated post, I think I get the idea.
I think you may be simply using the wrong selectors. You may review CSS selectors if you're unsure.
For one thing, if you want to style an h1 with the class of my_div_child, the rule would be h1.my_div_child, or simply .my_div_child, if you don't have other, non-h1 elements with that class name. Using .my_div_child h1 will select h1 tags inside a parent container with the class of my_div_child, which is not what your HTML shows.
If you want to reset the styles of children of #my_div, you can use the all: initial selector with the wildcard like you did, but instead of using the direct child selector (>), just nest the wildcard regularly:
#my_div * {
all: initial;
}
If you use the direct child selector, only the first level of children in #my_div will be reset, but grandchildren of #my_div won't be, which is probably not what you want.
Those things cleared up, simply use the above statement to reset your styles and then start styling the contents of #my_div as needed, and it should work because various tags (e.g., h1) will be more specific than the wildcard. See code snippet below.
That said, you may find it easier to simply override certain styles that aren't what you want by using specificity than to reset everything in #my_div and start over. Odds are there are some styles the menu will share with the site overall. For example:
h1 {
font-style: italic;
}
#my_div h1 {
font-style: normal;
}
If these approaches don't work, and you're still having trouble with your styles not working, you'd have to post some more specific code so we can work out what the problem is.
Example reset:
html {
background-color: coral;
font-style: italic;
font-family: sans-serif;
}
h1 {
background-color: white;
}
#my_div * {
all: initial;
}
#my_div .my_div_child {
color: darkgray;
font-size: 4em;
/* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}
<h1>Hello</h1> <!-- Should be black with background -->
<div id="my_div">
<h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->
I need to format HTML similar to below. Basically a quote is optional, and I need to dropcap the first letter of the body paragraph.
<article>
<p class="quote"> <!-- quote is optional -->
Genius begins great works; labor alone finishes them.-- Joseph Joubert
</p>
<p> <!-- "L" is a dropcap -->
Life is like a box of chocolates.
</p>
<p>...</p>
<p>...</p>
</article>
My CSS looks like this:
article > p:first-child:first-letter
{
float: left;
font-family: Georgia, serif;
font-size: 360%;
line-height: 0.85em;
margin-right: 0.05em;
}
p.quote {
font-weight: bold;
}
It doesn't work currently when the quote is introduced. AFAIK I can't select the article's first child P which is not class "quote." I'll use jQuery if I can't figure this out, but for now I'm looking for a way to do it CSS only.
Thanks in advance!
If you're OK with using CSS3 selectors, try using these (grouped together):
/* Select the first child if it's not a .quote */
article > p:not(.quote):first-child:first-letter,
/* Or, if the first child is a .quote, select the following one instead */
article > p.quote:first-child + p:first-letter
{
float: left;
font-family: Georgia, serif;
font-size: 360%;
line-height: 0.85em;
margin-right: 0.05em;
}
See the jsFiddle demo
Otherwise I think you'll have to play with some overrides to get the desired effect.
Some explanation
The negation pseudo-class :not() is always processed independently of all other types, IDs, classes and pseudo-classes in the compound selector. This is regardless of how you arrange it with your other selectors.
To put it another way: you can't use :not() to remove, or filter out, elements that match what's in the negation, from a selection matched by the rest of the simple selector. It also means that the set of the elements matched by the :*-child() and :*-of-type() pseudo-classes is not affected by :not().
So the first selector above,
article > p:not(.quote):first-child:first-letter
works roughly like this:
Find every p element.
If not found, ignore.
If found, check whether this p is the :first-child and if it's :not(.quote).
If it's not the first child, ignore.
If it has the quote class, ignore.
If it matches both pseudo-classes, check whether this p is a child of article.
If not, ignore.
If so, grab its :first-letter.
Apply rules.
The second selector, on the other hand, is relatively straightforward:
article > p.quote:first-child + p:first-letter
All it does is take the p that comes right after the first child of article if it's a p.quote, and apply rules to its :first-letter.
Why don't you use <q> or <blockquote> for the quote? then you can use
p:first-of-type:first-letter
p.dropCap:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
Hey SO, I am a bit rusty with my CSS, so bear with me :)
I am working with a layout that has a border-bottom property for h2,h3,h4,h5,h6. One of my pages uses h3 to display titles for a FAQ listing, and it has an anchor tag since there is an expand/contract script active (click title, FAQ appears below title). I do not want these particular h3 elements to have the border. Is there a particular CSS syntax that I can use to achieve this? maybe something like:
#content a,h3 {
border-bottom:none;
}
This is obviously wrong since it will just clear any bottom borders for any a/h3 elements that reside in my content container.
thanks!
Clarification:
<h3>Text</h3>
There's no CSS selector that will select elements based on their parent. The best solution is to give the FAQ container an ID or class and then:
#faq h3 {
border-bottom: none;
}
The following is a demonstration of what each css-selector would match to. Note that it is not acceptable by web-standards to place h3's within a's.
a h3 { styles }
<h3>Hello</h3>
h3 a { styles }
<h3>Hello</h3>
Use this instead :
h3>a { text-decoration: none; }
Doing so you target every 'a' childs of 'h3'
Prefer the use of classes and tags selectors versus ids the most you can, as targeting ids tend to make your css code less flexible and extensible. Think inheritance as in OOP.
For further reading and complete coverage of the CSS selectors you can refer to :
http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors
Cheers
#content a>h3 { border-bottom:none; }
should do it. The > means 'next tag must be'.
#content a h3 { border-bottom:none; }
would probably work too.
You use the comma for multiple rules e.g
h1, h2, h3 {
color: red;
}
For red h1 to h3
I have only a basic knowledge of css, is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags.
The reason I want to do this is to make it easier to maintain multiple styles.
You can define common styles for two elements at once like so:
p, a {
font-size: 1em;
}
And then extend each one with their individual properties as you want:
p {
color: red;
}
a {
font-weight: bold;
}
Keep in mind: Styles defined later in a style sheet generally override properties defined earlier.
Extra: If you haven't already, I recommend getting the Firebug Firefox extension so you can see what styles the elements on your page are receiving and where they are inherited from.
No CSS doesn't have any way to inherit styles. But there are several ways you can share styles. Here are a few examples:
Using multiple classes
<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>
p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Use the comma operator in your styles
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Using container elements
<div class="container">
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
</div>
div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
None of these are exactly what you are looking for, but using these techniques will help you keep CSS duplication to a minimum.
If you are willing to use server side code to preprocess your CSS, you can get the type of CSS inheritance you are looking for.
http://wiki.framwurk.org/documents:csspp/
http://mail.python.org/pipermail/python-list/2006-August/397266.html
http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer
Yes.
You should understand how the cascade in CSS works, and also understand how inheritance works. Some styles will inherit (like the font face) and some styles wont (like the border). However, you can also tell styles to inherit from their parent elements inside the DOM.
Of some help here is knowledge of how style rules are specified. This site about the CSS Specifity Wars might help (Note: this site is currently down, but hopefully it will be back soon).
Additionally, I find it sometimes helps to overload styles like this:
h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...
"...is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags."
The link tags will automatically use the fonts from the paragraph, if, and only if, they are within a paragraph. If they are outside of a paragraph (say in a list) they will not use the same font, etc.
For instance this css:
* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }
will generate links and paragraphs that are sized at .75em. But it will display links within paragraphs at about .56em (.75 * .75).
In addition to the specificity reference cited by Jonathan Arkell, I recommend the CSS Tutorial at W3Schools.
CSS will automatically inherit from the parent style. For example, if you say in your body style that all text should be #EEE and your background should be #000 then all text, whether it’s in a div or a span will always be #EEE.
There has been quite a bit of talk about adding inheritance the way you describe in CSS3, but that spec isn’t out yet, so right now we’re stuck repeating ourselves quite a bit.