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;
}
Related
I have this heading:
<h3>Contact info</h3>
Writing a class or a href to it it's not an option. It is in wordpress' user-edit.php file. I want to hide this element on the user's profile pages.
Is there any solution something like this?
h3["Contact info"] {
display: none !important; visibility: hidden;
}
Thank you for your help!
There is no way to can match an element based on a complete absence of attributes.
The closest you could come would be to test for the absence of some specific attributes.
h3:not([id]):not([class]) { }
Use the nth-of-type pseudo class. Suppose the h3 you want to hide is the fourth h3 element under the parent h2 heading, and that h2 heading is the third h2 on the page (I'll assume you only have one h1 heading). Then you use:
h2:nth-of-type(2) h3:nth-of-type(4) {...}
Just bear in mind that if you later add a new h3 heading before the one you are hiding, so changing the count, then you will have to change the number in the brackets.
But don't use display none and visibility:hidden together. Choose the one you actually want - display:none closes up the space the hidden element was taking, visibility hidden reserves the space even while hiding the element. They are contradictory. Also don't use !important unless you absolutely have to (see other StackOverflow answers as to why).
if you only have one h3
h3{
display: none !important;/* visibility: hidden;*/
}
otherwise you could use attr selectors like h3[title~=yourTitle],
another option is to use child selectors
div > h3
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.
I know this has been asked before here. But let me put my problem in a different way. I am using PHP and would like to show a HTML string coming from database in my page. But the problem is as the CSS of the page is of a generic style, it's taking the them in the HTML string also. But I want it to show without any styling whatsoever. I have gone through some searching the internet only to find about the "not" selector of CSS. I would like to know whether there is a way to identify a single element in my html page that would “not” take the general styling/css? What “not” does is specify all other element and “not” the one in the argument. I just want the opposite.
<style>
.div-class p{font-weight: bold;}
.div-class p:not(.no-style){font-weight: normal;}
</style>
<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold.</p>
</div>
I would like the “p” with the “no-style” class to have a normal font weight. It’s currently the opposite. I hope to have made myself clear.
Thanks,
You may place your script output in div with certain id/class. And reset css to this div. There are a lot of various css resets available.
P.S. IMHO there is no css rule to disable all css for certain elements.
P.P.S. You may create an empty iframe (src="about:blank") and place your content there with javascript.
<style>
.div-class p
{
font-weight: bold;
}
.div-class p.no-style
{
font-weight: normal;
}
</style>
<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold. </p>
</div>
Edit: see it working: http://jsfiddle.net/C3jqc/
Edit 2: you can't avoid heritage. You could use "not" in your CSS in this way:
<style>
p:not(.unstyled){
font-weight : bold;
}
</style>
<p> this should be Bold</p>
<p class='unstyled'> This shouldn't be bold</p>
Then add the "unstyled" class to every content you create from your PHP and the ":not(.styled)" to every CSS declaration.
Another option is to redefine every style in your CSS to match my original response.
Bear in mind the availability of the "not" selector across browsers.
there is a simple way to override the styles applied
you can use !important
for example
p{
font-weight:bold;
}
will not be applied if u have
.nostyle
{
font-weight:normal !important;
}
JSfiddle
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'm trying to catch all the elements of my website in one css declaration. It's a Drupal websites with a billion p's, a's, li's, ul's, strong's, all kinds of div's,...
So, pretty easy I thought and I added this in my css:
body.i18n-zh-hans {
color: red;
}
But for some freakishly reason, the site doesn't move a muscle.
What's the proper declaration to catch ALL the text in just 1 CSS declaration?
Worst case scenario, I would have to declare everything on its own no? Like:
body.i18n-zh-hans, #main p strong a li ul {
color: red;
}
UPDATE
So, Basically, I just want to override all, in this example, the colors of the font in the whole website!
Thanks in advance
You'd want to make that declaration !important, so it'd override any more "specific" styles specified elsewhere in your CSS. Remember that CSS has precedence rules, and "more specific" matches will have higher priority than "less specific" ones.
body.i18n-zh-hans {
color: red !important;
}
* {
your style..
}
and you got to be the last rule in the list..
and there might be some inline styles, those will override..
tested it a bit out and figured out that everything you define in it needs !important..
Here you go:
If body is the biggest box in the box model. Get it? You want to target the big container. Try firebug. It's a great tool. You can even edit the css on the browser to instantly change the website (not permanent though).
body {
color: red !important;
}
This was the one and only solution!
.i18n-zh-hans * {
font-size: 99% !important;
}
Thanks to everyone who participated this discussion.