This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
<div id='one' class="one">1</div>
So the div above has a class and ID. I have added inline styling in the header section:
<style>#one {color: red;}</style>
In the style.css file I have the following code:
#one.one {color: blue;}
The colour of the text in the div is showing up as blue. Why is that? I was under the impression that inline styling has the highest specificity.
An inline style is style inlining in the html like this :
#one.one {color: blue;}
<div id='one' class="one" style="color:red">1</div>
If you add the style in the style tag, it is considered like in css file, so it's the last found which is applied
Inline styling means putting the style inside the element tag. Try this.
<div id='one' class="one" style="color: red">1</div>
CSS stands for Cascading Style Sheet. That means it "Cascades" or is designed to be overwritten be the last thing to write to it.
If you had red as the last color in your script, it would be red instead.
Related
This question already has answers here:
Why would I use an ID selector instead of a class?
(6 answers)
Closed 1 year ago.
For example I want this:
<link rel="stylesheet" href="stylus.css">
only for this code:
Buy!
If you use it for only one, then use id with #, for multiple elements you use class with .
#only-this {
color: red;
}
<a id="only-this" href="yeet">Buy!</a>
Sell!
You need to make an identification on your html and then select it on the CSS page , like :
HTML :
<a id="buyButton">Buy!</a>
Then on CSS:
#buyButton
{
color : blue;
}
You can just have a class in your CSS and then you apply it to your object:
.my-stylus-class {
color: blue;
}
<a class="my-stylus-class" href="yeet">Buy!</a>
I wanted to add that a class or ID is not neccesseraly required, you can of course also just define the element itself in CSS, so for example this would be also possible:
a {
color: blue;
}
Buy!
you can't tell the browser to use a specific stylesheet (file) only for a certain element.
you have to give the element a specific ID, or class, and use that in your css for example:
.yeet {
/* CSS Properties go here */
}
Buy!
Inline css.
Buy!
This is what the question was: one element. A class can be more than one element. Here, using inline CSS which is not any worse than stylesheet CSS, you can make your yeets differently styled.
Buy!
<br>
Buy!
<br>
Buy!
<br>
Buy!
<br>
Buy!
<br>
Buy!
<br>
Buy!
So I've been coding for a week and I have googled for 30 min trying to find a solution. So excuse me if it's already been asked. I'm trying to write a summary of what I've learned after each lesson but it's not working!
<body> <center> h1> Module 40 </h1> </center>
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
</body>
And my CSS is this:
p
{
font-size: 15px;
}
/*****class selector*****/
.p1
{
font-size: 20px;
}
Shouldn't the class selector override the tag selector? Font size 15px is being applied to the whole text. It works if I add class="p1" to the second paragraph. But shouldn't this work if I add it to the div? Isn't that the purpose of having a div?
Must be .p1 p
p
{
font-size: 15px;
}
/*****class selector*****/
.p1 p
{
font-size: 20px;
}
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
This happens because of Specificity. Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
You can find one of the most useful documentations here -
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
No because your paragraph is a child of .p1
All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)
You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag
This question already has answers here:
:first-child not working as expected
(5 answers)
CSS selector for first element with class
(23 answers)
Closed 5 years ago.
I'm wondering why the following CSS fiddle is not just turning off the up arrow on the first child and not any other DIVs.
<div id="activeitemslist" class="">
<div class="ind_item">
<div class="ind_updn">
<span class="fa fa-arrow-up"></span>
<span class="fa fa-arrow-down"></span>
</div>
</div>
<div class="ind_item">
<div class="ind_updn">
<span class="fa fa-arrow-up"></span>
<span class="fa fa-arrow-down"></span>
</div>
</div>
</div>
CSS
#activeitemslist{width:100%;border:1px solid red}
#activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important }
.ind_item > DIV{display: inline-block;text-align: center;vertical-align: middle}
https://jsfiddle.net/vvc0a4gx/
Hi.
Where is the problem?
Let's try explain essential part of your CSS rule: #activeitemslist DIV:first-child.
It looks for a div which is first child of his parent and parent must be inside element with id="activeitemslist".
According to this both up arrows fit in your rule #activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important } so both are not displayed.
Solution
To refer just to first child div of element with id="activeitemslist" CSS rule should looks like #activeitemslist > div:first-child.
So to not display first up arrow in exemplary fiddle use follow CSS rule (there is no need to use !important):
#activeitemslist > div:first-child span.fa-arrow-up {
display: none;
}
Updated code fiddle from the question with the solution.
Sources
You can read more about CSS3 selectors on e.g. W3Schools page.
Cheers
I changed the CSS here
#activeitemslist .ind_item:first-child SPAN.fa-arrow-up {display:none !important }
Hey does anyone know how I would accomplsh this with pure css.
<a id="link"><span>Some Text</span></a>
<div id="someDiv"></div>
Make the spans "Some Text" a certain color when someDiv is moused over.
Not sure if this is possible. Thank.
Due to the way CSS selectors work, there's no previous sibling selector. So with your existing markup you can't use pure CSS to do it.
If the link were to come after the div, however:
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
The selector to use would be #someDiv:hover + #link span.
This might be possible if you have a parent element to associate the css hover class with. For example:-
<div id="parent">
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
</div>
& den use the following css.
#link
{
position:absolute; /*This is to ensure the hover is activated only on the someDiv div & as absolutely positioned elements are removed from the normal flow of the document*/
/*You can position this anchor tag wherever you want then */
}
#parent:hover > link > span
{
color:#000;
/*enter code here/*
}
Pure css? Working in all browsers? Not possible in this structure.
I think this should work, assuming these two elements share the same parent and a#link is the first child of that parent element.
#parent div#someDiv:hover ~ a#link:first-child span {
color: blue;
}
IE6 doesn't support it, but if you can live without IE6 (and you really should, IMO), you should be okay.
I have following statement:
<font color="#2B547E">
Now I don't want to hard code it in my html; instead I want to apply a css class. I don't want this color for all fonts in my page, only for a specific part. I tried the following:
<font class="xyz" >
But it's not working. I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.
How can I move that hard coded value to css?
If you can add a CSS class for this <font> element, you should be able to switch over to using a <span>:
HTML:
<span class="coloredText">text</span>
CSS:
.coloredText {
display: inline; /* will stop spans creating a new line */
color: #2B547E;
}
If you still find the span creates a line break, you can change the rule to
display: inline !important; - this will increase the precendence of this rule so it will take effect. I'm not sure if the use of !important is frowned upon by CSS-pedants, but it might help.
Should be:
HTML:
<font class="xyz">...</font> <!-- or any other tag -->
CSS:
font.xyz {color:#2B547E;} /* or just .xyz */
See also: Class and ID Selectors
First off, use a reset css to reset all your styles to a default of your choice.
I use this one, but there are others around : http://meyerweb.com/eric/tools/css/reset/
Then, write your css and use targeting to apply the styles to different elements
This link explains CSS specificity : http://www.htmldog.com/guides/cssadvanced/specificity/
<link rel='stylesheet' href='reset.css'>
<style>
#top p {
color: blue;
}
#bottom p {
color: red;
}
.black {
background: #000;
}
</style>
<div id='top'>
<p>This text will be blue</p>
<span class='black'>I have a black background</span>
<div>
<div id='bottom'>
<p>This text will be red</p>
<span class='black'>I have a black background too!</span>
<div>
You can use a combination like this:
<div class="xyz">Your content goes here...</div>
and the CSS can be:
.xyz {display: inline; color: #2B547E;}
This will solve the problem of new line and also give the desired color.
HTML
<p>Lorem ipsum dolor sit amet, <span class="xyz">consectetur adipiscing elit.</span> Mauris ultrices arcu eu velit euismod pulvinar.</p>
CSS
.xyz {
color: #66CD00; }
View a live example
I'm sort of lost as to what you can and can't do here ;) but I'll put this in incase
font[color="#2B547E"] {color: red;}
<p>I have following statement: <font color="#2B547E">I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.</font></p>
Unfortunately IE7 has problems with this but it does target if you use font[color] {color: red;} - This will of course not enable you to specifically target by existing colors if that's what you're after - but it will target them all to bring them in line if that's all you require, a mixture of the two might provide a decent enough fallback?
Your problem might be a case of CSS specificity, i cant tell from the details provided. if your style for spans is defined through an ID such as
#somediv span{ display:block}
That css will overwrite something like
span.myspan{display:inline}
because the ID style is more specific, you can solve this a few ways, first you can set the style inline in the html.
<span style"display:inline; color:#2b547e;">some text</span>
or you can make a class and use a more specific style by including the parent ID in the css
#somediv span.myclass{display:inline}
Be more specific with your selector, instead of just div, use div.class, or div.id
<div class="Foo">
Bar
</div>
div.Foo {
color:#2B547E;
margin:0; /* overriding the predefined styles in other sheet */
padding:0; /* overriding the predefined styles in other sheet */
}
replace margin / padding with whatever is causing the new line.
Also I'd always recommend not using style tags; such as Font. Your Html should use declarative only tags. Not to mention the Font tag is deprecated.