I am curious why would the second color get over-written by the first one? Is there a way around this by not adding !important or wrapping it in the body class?
body.football h3 {
color: #a07a40;
}
footer h3 {
color: white;
}
Cascading stylesheets go by a hierarchical scheme if two selectors exist targeting the same element. The more specific one will take precedence.
However, your body probably should not have a class on it like that, just as a best practice. It's begging for headaches.
Your options:
Quick and dirty, you can use a descendant selector > to specify the immediate child. For instance:
body.football > h3 {
color: #a07a40;
}
footer > h3 {
color: white;
}
<body class="football">
<h3>Football is the Bees Knees</h3>
<footer>
<h3>Hi Ma Hi Pa</h3>
</footer>
</body>
Alternately, per your OP, you can also wrap the body content in a section or div and apply styles to that, IE:
section#football h3 {
color: #a07a40;
}
footer h3 {
color: white;
}
<body>
<section id="football">
<h3>Football Yo</h3>
</section>
<footer>
<h3>Yo Football</h3>
</footer>
</body>
Edit: I should add that the empty space between the two elements means that you're going to hit ALL the elements that are descendants of the parent elements.
It is getting overridden because css will use the most specific selector over any other selector.
To resolve this you will either need to use the !important flag or change the footer selector to be more specific, the easiest way to do that is use an id.
An Example:
#footer h3{
color: white;
}
<footer id='footer'><h3></h3></footer>
CSS likes to prefer more specific declarations over less specific declarations. Without seeing accompanying HTML it may be a little hard to be sure, but it is most likely because your body.football declaration is more specific.
There is html mistake on writed code or css structure.
HTML:
<body>
<div class="football">
<h3>ho</h3>
</div>
<footer>
<h3>test</h3>
</footer>
</body>
CSS:
body.football h3 {
color: #a07a40;
}
footer h3 {
color: red;
}
Example on Fiddle.
Or if football is on footer section, then you need put a class.
footer h3 {
color: red;
}
footer .football h3 {
color: #a07a40;
}
Fiddle
Related
I have a div which contains the page's title. Is it possible to set all text to the h1 style without using tags?
For example:
<div id="title-div" style="h1">My Title</div>
Or maybe something like:
#title-div {
style: h1; //Imports all styles from h1
}
Is this kind of thing possible?
No.
Extensions to CSS such as SASS tend to have features like #mixin which can define a set of rules once and then apply them in different places but:
CSS itself has nothing like that
The styles have to be explicitly defined as a mixin
Find the css for your h1 tag and just add your div id (assuming you have control over that css and its not coming in from a 3rd party, in which case you will likely just have to copy it)
h1, #title-div {
// styles
}
You can use class or id to style your page's title.
CSS example for styling with "id":
#title-div {
//add your styling here
}
The other option is a "class", so in the "div" open tag, you should have "class" HML example:
<div class="title">
<h1>My Title</h1>
</div>
CSS example for class styling:
.title {
//add your styling here
}
Also, I think you should add in the div container h1 to understand and clear it.
You can use the default style of h1
-webkit-text-size-adjust: 100%;
line-height: 1.5;
color: #000!important;
box-sizing: inherit;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
font-size: 42px;
I am using a css file I got online for a website I'm making, but I'm only embedding some components into the website. This css file uses global styles, and they are overriding all of the global styles on my website. I figured I would just wrap the global styles and make them descendants of a class, and then make that the parent class of my component. Here's an example of what I'm saying
h1 {
color: red;
}
.text {
color: blue;
}
But now all of my h1 tags on the page end up red. I decided to wrap all the global styles and make it so only the descendants of a certain class would be affected by that style. Here's what the new css looks like
.parent-class h1 {
color: red;
}
.text {
color: blue;
}
and make my html look something like this
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
The first part actually works. My top h1 is not affected by the global css, when it was before.
But here's the problem I'm running into. Before, the text class was overriding the global h1 style, and my Hello ended up blue, while my How's it going was red. Now that h1 has been wrapped by a parent, Hello is also ending up red.
I know that the parent style appears first in the css file, so I don't think it's a question of what is being rendered first. Also, I know that everything is using classes, and not IDs, so that priority issue isn't occurring either.
I'm guessing that this is occurring because of the .parent-class h1 now has two rules while .text only has one. If that's the case, is there a way to mitigate this problem?
One thing I could do is just wrap the parent around the child, like .parent-class .text, but the css file I found online has close to 25,000 lines of code, while the global rules only had about 300, so that would be extremely time consuming, because there's thousands of classes I would need to alter.
Is there another way to fix this problem? If not, is there a way to wrap a parent rule around multiple blocks of code, in a way like this
.parent-class {
.text {
color:blue;
};
h1 {
color: red;
};
}
Or is that not possible?
Make sure your second selector is having the same (o higher) specifity by combining it with something else. You can for example add nth-child(n) which will not change the behavior of your selector but simply increase its specificity:
.parent-class h1 {
color: red;
}
.text:nth-child(n) {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
You can also duplicate the class:
.parent-class h1 {
color: red;
}
.text.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
If you need to update multiple stylesheet rules loaded from another source, you can use the CSSStyleSheet API to delete and insert rules:
const styleSheet = document.styleSheets[0]
const rules = Array.from(styleSheet.cssRules).map(r => r.cssText) // get the rules texts
rules.forEach(() => styleSheet.deleteRule(0)); // remove the rules from the stylesheet
rules.forEach(cssText => styleSheet.insertRule(`.parent-class ${cssText}`)) // generate new rules with the namespace
h1 {
color: red;
}
.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
If you just need to exclude a single case, you can use the :not() pseudo-class to disable for the h1 elements with the class .text:
.parent-class h1:not(.text) {
color: red;
}
.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
just use !important like this
h1 {color: red;}
.text {color: blue !important;}
Link to site in question.
In the footer, just above the copyright notice, I have a small block of Schema microdata. Business name, address, phone number. I want that text to be write, matching the copyright notice below it.
I've tried to do it like this:
<div class="schema_footer"> Schema block here</div>
And in my css file:
.schema_footer {color: #ffffff;}
Why doesn't this work?
Try this, the HTML is more complex than the example you have provided as shown in the screenshot. There may also be more specific CSS that you can't override unless your CSS is at least as specific:
.footer .schema_footer div,
.footer .schema_footer span
{
color: #fff;
}
It is not good practice, but you could also add the important rule color: #fff !important; to try and override the previous styles that have been set.
That is because there are more specific rules that overrides the rule mentioed in the .schema_footer like the one below:
....
.footer span, .footer a {
color: #666;
}
So you need to make your rule even more specific like.
.footer .schema_footer span, .footer .schema_footer a {
color: #fff;
}
or override the .footer style later in the stylesheet (or with multiple style sheets load this one later)
.footer span, .footer a {
color: #fff;
}
No matter how bug the html is, You can always use the web inspector to inspect the styles applied and overridden. Here is how it looks after overriding and you can see the second arrow showing the actual rule applied before.
here is a simple solution
.footer {color: #fff;}
I have the following code:
<div class="wrapper">
<div class="location info">
<h3>Location</h3>
<h3>should be no stlye</h3>
</div>
<div class="skills info">
<h3>Skills</h3>
<h3>should be no stlye</h3>
</div>
</div>
I'm trying to style the first h3 element after an info class. I thought this should work, but it dosen't:
.info:first-child {
color: color: rgb(200,50,50);
}
Why isn't this working? How should I style the first element in . info without adding extra markup in the html?
You need a space:
.info :first-child
The first-child pseudo element describes the element itself, not the children of the element. So, without the space you are selecting elements with a class of info that are the first child of their parent.
The space specifies that you are looking for descendants of .info. Since you are looking for just direct children, you should use the child combinator - >, and probably also specify only h3 elements:
.info > h3:first-child
Edit: I only noticed the problem with the selector. As mentioned in other answers (+1 to user1479606), you have a typo in your style definition as well: color: color: ... should be color: ....
You're not far away, try this:
.info > h3:first-child {
color: rgb(200,50,50);
}
But instead of using something like this, I believe the best approach would be to add a meaningful class to the first h3 - this will make reading the CSS and markup much easier in the future and it will prevent unexpected behavior when editing your markup. For example:
.info-title {
/* your styles here */
}
Your css is not correct, you only need to specify color once. You also need to make a more slightly change to your selector:
.info > h3:first-child {
color: rgb(200,50,50);
}
Demo: http://jsfiddle.net/WSZcS/
I'm trying to style the first h3 element after an info class.
.info > h3 {
color: rgb(200,50,50);
}
If your h3 tag is not the first child element you can use
.info > h3:first-of-type {
color: rgb(200,50,50);
}
I'm just beginning to learn CSS (and XHTML) and I ran into a problem of assigning different properties to tags which have the same tag name.
For example: I have two h3 headers, but want to address them specifically using CSS because I want to make them different colours.
I believe this has something to do with naming the headers differently (i.e. h3.a), but trying this didnt work. Help would be appreciated!
Besides the tag name CSS can be applied by Class and ID. Note that it's best to make sure the case in your tags matches the case in the tags.
.myClass may not apply to class="myclass"
IDs:
<style>
#FirstHeading {color: red;}
#SecondHeader {color: blue;}
</style>
<h3 id="FirstHeading"></h3>
<h3 id="SecondHeader"></h3>
Classes:
.redHeading {color: red;}
.blueHeader {color: blue;}
<h3 class="redHeading"></h3>
<h3 class="blueHeader"></h3>
The purpose of IDs are typically to point to one specific element in your page, classes are designed to work with multiple different elements
Classes can also be combined, so you don't need to load all the styles into one class.
<style>
.redHeading {color: red;}
.blueHeader {color: blue;}
.boldHeader {font-weight: bold;}
</style>
<h3 class="redHeading boldHeader"></h3>
<h3 class="blueHeader boldHeader"></h3>
You can assign a class to each element and use CSS to target only that class. For example:
HTML:
<h3 class="green">Green heading for this one</h3>
<h3 class="red">Red heading for this.</h3>
CSS:
h3.green { color:green; }
h3.red { color:red; }
Add different class attributes to each h3, then address them in CSS using .className.
e.g:
HTML:
<h3 class="class1">One header</h3>
<h3 class="class2">Another header</h3>
CSS:
.class1 {
color: #00f;
}
.class2 {
color: #f00;
}
This is where classes come in handy.
CSS
.myFirstClass { color:green; }
.mySecondClass { color:red; }
HTML
<h3 class="myFirstClass">Text</h3>
<h3 class="mySecondClass">Text</h3>
There are so many different ways to target selectors.
You can give them class names:
<h3 class="makeblue">This should be blue</h3>
<h3 class="makegreen">This should be green</h3>
// in you css
h3.makeblue { color: blue; }
h3.makegreen { color: green; }
You can use "advanced selectors":
<div class="container">
<h3>This should be blue</h3>
<p>
<h3>This should be green</h3>
</p>
</div>
// in your css
div.container > h3 { color: blue; }
div.container p h3 { color: green; }
have a look here: http://css.maxdesign.com.au/selectutorial/
A useful thing to keep in mind when naming classes is to avoid names that imply how the class is styled. Naming classes after their styles leaks design information into the HTML, and if you later do a redesign, you will either have class names that no longer match the design, or you will have to edit both the HTML and the CSS to keep it up to date.
A much better practice is to create classes with semantic meaning, such as: subtitle, navigationHeader etc. Additionally, it's a good practice to give multiple classes and thus "extend" objects instead of repeating yourself:
<h2 class="subtitle forum">Forum</h2>
<h2 class="subtitle group">Groups</h2>
.subtitle {
font-size: 14px;
font-weight: bold;
color: green;
}
.subtitle.forum {
color: blue;
}
.subtitle.group {
color: red;
}
In CSS by addressing a tag you address all copies of that tag unless you are more specific.
e.g.
a h3 {} would address all h3 tags within an a tag.
However if you want to style individual elements or want more freedom you should be using a class or an id.
An id can be used on one element and works like so:
<h3 id="header"></h3>
you can then use
#header {
// your css style here
}
to style it.
Or you can use a class which can be used on multiple elements like so:
<h3 class="red"></h3>
<a class="red"></a>
you can then use
.red {
// your css style here
}
to style it.
Google provides some good video tutorials here: HTML, CSS and Javascript from the ground up
Make a class in CSS, like this:
h3.class1
{
color: blue;
}
Then just say:
<h3 class="class1"></h3>
You can use the class or a parent to define it. If you use a class it would be defined like:
h3.colorOne {
color: #ff0000;
}
h3.colorTwo {
color: #0000ff;
}
Then they would be used like:
<h3 class="colorOne">I'm red</h3>
<h3 class="colorTwo">I'm blue</h3>
Alternatively you can specify settings by a parent using an id field in a div of sorts:
#divOne h3 {
color: #ff0000;
}
#divTwo h3 {
color: #0000ff;
}
Which would be used like:
<div id="colorOne"><h3>I'm red</h3></div>
<div id="colorTwo"><h3>I'm blue</h3></div>
The usage all depends on the needs of your layout and the extensibility of your styles.