This is a simple question. However, I couldn't find an answer after 10 minutes search. I would like to explain my question with examples, so you can understand what I am exactly talking about.
Let's say there is a div tag with an id and it has also some text inside:
<div id="text">Hello World</div>
and I also have css rule which will turn the text into red.
.makeRed{
color: #FF0000;
}
The question is I want to make the text red in my div tag. I can simply do it like this:
<div id="text" class="makeRed">Hello World</div>
Instead of doing it, is there another way to make that text turn to red? Because if I keep adding makeRed rule to my every div that I need, it will turn my html into garbage. So I wonder if there is any way to do it clearly. I would like to use that way for "clearfix" method for some of my divs.
Whenever I need clearfix, I do like this and this is bad:
<div class="clearfix">
<div id="text">Hello World</div>
</div>
The question is: which text do you want to make red, and why?
If you want the text of all your divs red, you can just write
div{ color: red; }
If it's just for, say, an error message, I would add the class 'error' rather than 'red'. That way, you can make the HTML more semantic. You still have to add a class, but it has more meaning:
.message.error { color: red; }
You can add the ID of your div to your css like so:
.makeRed, #text{
color: #FF0000;
}
You can separate targets by commas to include multiple different elements in the style. This will maintain the styles applied to .makeRed and apply to your #text div.
Related
So, I recently had this issue, that I tried to specifically style all "h1" tags with the "div" tag, but it just didn't work. I had to put the "class" values in the "h1" tags manually, which is quite annoying.
Didn't work:
<div class="Title">
<h1>Title</h1>
<p>Paragraph</p>
</div>
CSS
h1.Title {color: red}
Did work:
<h1 class="Title">Title</h1>
<p>Paragraph</p>
I am pretty new to CSS, so it's very possible I just forgot something or so, and if that's the case, please tell me!
when you type h1.title you're saying "Every h1 element with class='title'" which means that if you put the class title on the div it won't get selected. It's usually better to drop the element selector and just use .title in your css so it will hit any element with the class of title.
You're just formatting it wrong, nothin too big! CSS inheritance is kinda weird when you start out with it (or seemed weird to me) but it eventually makes a lot of sense. Start with the parent, and then select the child from it. like:
parent child {
}
So in your case:
div h1 {
color:red;
}
But for your class, you can do this
.Title {
/* affects all title children */
}
or
.Title h1 {
/* affects all h1s with a parent of Title */
}
I'm not here to argue about variable initialization, but I would never ever ever use capital letters first in your class or ID declarations. Some people prefer camelCase, but I prefer underlined_naming.
I don't want to berate you for this, but someone here eventually will! Plus, forming good habits now will save you a lot of time fixing them later.
Try
.title h1 {
color: red }
just do
only h1 in title dive will be changed..
.Title h1{
color:red;
}
Is there anyway i can access the style property for the particular div? For example, I have a code like below
<div class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
I want to apply some other background color for this division. But i don't want to modify the class "testing", because it is being used in some other places also. Is there anyway using CSS only to access the style property and apply my new color?
I think attribute selectors may be what you are looking for:
div.testing[style="background-color:#ff00ff;"] {
background-color: new_color !important;
}
You can create another class and overwrite necessary property:
.testing-active {
background-color: red;
}
and use it like this:
<div class="testing testing-active"></div>
You need to make a style that has higher priority than the style. You could use the !important attribute to do that:
<div class="testing" style="background-color:#ff00ff;background-color:red !important;">
Big important caveat: whatever it is you're trying to do doesn't sound like a good idea, because the code will be very difficult to maintain. What is the underlying problem that you are trying to solve?
You can access the elements with this certain style like this:
.testing[style="background-color:#ff00ff;"] {
/* put your attributes here*/
}
but you cannot change the background-color attribute since this one has a higher priority in the html.
see this:
.testing[style="background-color:#ff00ff;"] {
background-color: #00f; /* not possible */
margin: 30px; /* possible */
}
what you can do is add a new attribute to your html like this:
<div class="testing" changecss="true">
This is my test Paragraph
</div>
and add this css:
.testing[changecss="true"] {
background-color: #00f;
}
See the JsFiddle as well.
"Think it is a dynamic code. How can i add new class without using javascript? "
The Answers is You cannot add a new class using CSS dynamically/ runtime. The only way to do it is by using javascript/jquery:-
HTML:
<div id="mydiv" class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
JQUERY:
$('#mydiv').css('background','#ColorCode');
This way your class also wont change( since its being used in other places) and you can change the background also.
Can i ask why you are trying to achieve this using CSS?
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.
I have very limited knowledge of coding, html/css, but I have a problem which makes me want to learn more. Anyway, I want to change the font-size inside a <span>, nested inside the code of the page. The complete code-snippet looks like this:
<span style="font-size: 11px;">Buy</span>
I want to change that to font-size:14px;. But, since there is no class/ID, just a <span>, I don't understand how to change it. And as I said, it's deep within the document and there are at least 20 divs or some wrapped around it.
Is there a way to target that span, and maybe get the "path". I've been fiddling with Developer Tools in Chrome but I really don't see how XPath can help me?
To sum it up - how do I overwrite inline css (without a class or ID), from an external css?
Thank you.
Sorry if you have already tried this but !important in your css declaration will override any css declarations
You can declare a property as final( in my word ) as below.
Try this in external:
selector {
font-size: 14px !important;
}
You need to have an id to change that particular span's font size. If you change for span than it will affect all spans in the document. Or if the span has a parent element you can select that
.parent span {
font-size:14;
}
update
needs to have !important to override the inline rule.
but who uses inline rules anyways. you shouldn't.
Add a class to it and then target
<span class="target">Buy</span>
Adding a "new" class wont hurt
You cannot target it without a class directly.. maybe the parent div has a class then
<div class="parent">
<span style="font-size: 11px;">Buy</span>
</div>
.parent span{
font-size: 18px !important;
}
You will ahve to use !important to override the inline css.. also keep in mind that this will effect all span inside a div with class of parent
<div style="background: red;">
The inline styles for this div should make it red.
</div>
We can fight that with this:
div[style] {
background: yellow !important;
}
Of course just add a class to the div before [style] to change the div with class you added.
example:
div.myclass[style]
I have a DIV square containing the word "Next". I would like to have the DIV background color change when I hover over it and have it take me to a link when I click on it. Can I do this without using Javascript? I don't just want to use a link as I guess for that then it would only work if I go above "next".
Thank you very much for advance helping.
Inevitably we have to ask: why not make it a hyperlink? If it quacks like a duck and looks like a duck, it should really be a duck.
You can handle the hovering effect with a simple :hover rule in your stylesheet (e.g., div.whatever:hover { color: red; }), but you can't instill an element with functionality like going to a new page without the use of JavaScript.
In HTML4(and to the best of my knowledge) HTML5 you can't do this. I heard they are planning on doing it in XHTML2 but that's not out yet.
You could simply use the <a> element like a <div> just give it a class, for example NextLink and then you can do things in CSS to make it look and act like a div:
.NextLink {
display:block;
}
.NextLink:hover {
background-color:red;
}
You can achieve this by having a hyperlink within the DIV with display:block:
<style>
#next:hover { background-color:red; }
#next a { display:block; }
</style>
<div id="next">
Next
</div>
Yeah, you can't really do that without javascript--or at least it wouldn't be worth trying, in my opinion. The best approach would be to style the a tag. Something like this:
a {padding:10px;border:solid 1px #000;}
a:HOVER {background-color:yellow;}