This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
How do I prevent CSS inheritance?
is there a way to exclude a tag from css class
I have CSS like this
.div1 img {
// ...
}
.myimg {
// ...
}
and my HTML code is like this,
<div class="div1">
...
<img src="..." class="myimg"> // image html
...
</div>
The css formatting defined in .div1 img is obviously applied to the image html code. However, I actually don't want it happen. What can I do to not to have '.div1 img' effects on that image html code? I don't want to modify the content of div1 img or related html code because it is used in other places already (and it is a template code that I don't want to mess with).
P.S. I cannot remove or modify <div class="div1"> either because there is other template code around.
Thanks.
You have two options:
You can explicitly override all of the styling defined in .div1 img with what they should be in .myimg
You can write .div1 img:not(.myimg) for the first rule.
You could do:
.div1 img:not(.myimg) {
// ...
}
:not selector explained here
There is a nice little not selector that would work, but unfortunately it doesn't work in all browsers.
One sure way to do that is redefine all your .div1 styles in your child .mying class so it overrides the parent.
here is a little demo in jsfiddle: http://jsfiddle.net/u6MnN/1/
mess around with it and see what's best for you.
you need to neutralize all those stylings you are giving to ".div1 img" for example if you say "width:100px" there you need to say "width:auto" in the other one.
Although if you have lots of rules in the first set it would be very dirty this way and you need to change your layout.
If you have img tags inside a container div with class .div1 they will of course get the styling you define in .div1 img, but if you want lets say 2 images out of 8 in that div to have another style (which i believe is why you made class .myimg), you need to put !important after the defined stylings in .myimg like so:
.div1 img
{
height: 125px;
width: 125px;
}
.myimg
{
height: 150px !important;
width: 150px !important;
}
This is only if you are NOT using CSS 3.0
Related
I have the following structure:
<div class="irrelevant"></div>
...
<div class="div1"></div>
...
<div class="irrelevant"></div>
...
<div class="irrelevant"></div>
...
<div class="div2"></div>
I'd like to apply some CSS only to .div1, considering that it's on the same level as (not a children or parent of) .div2.
EDIT: To bring some light in the issue: The first div is actually my website's logo and the second div is a navigation that MAY or MAY NOT exist depending on the page viewed. If the navigation is present, I need to display the logo in a different manner (resize it).
CSS works as a cascade then you can never refer to elements based on what is next to them, just possible refer elements based on what was there before them.
The subjects of a selector are always a subset of the elements matching the last simple selector
For this you may need the help of Jquery:
$(document).ready(function (){
if($('.div2').lenght > 0) {
/*actions for .div1 here*/
}
})
Since the class of both the divs are different, you can apply some specific rules to div1 by using class selector .div1
.div1 {
/* div1 styles */
}
Ah, so you want to apply css to div1 if div2 exists? CSS can't do that. You need JS. jQuery for example:
$('.div2').parent().find('.div1')
you can then apply the css directly or add another class ('div2exists') and add your style in your css-file
Though there's a way doing this in CSS, I personally would not recommend that.
It will only work if we assume we have a fixed number of div elements inside some ".container" div. And this number is 6, 2nd is the logo (also it is 5th counting from the end), 5th is the navigation.
.container {}
.container .logo {}
.container .navigation {}
.container div:nth-child(2):not(:nth-last-child(5)).logo {
width: 100px;
height: 100px;
}
.container div:nth-child(2):nth-last-child(5).logo {
width: 200px;
height: 200px;
}
The first rule is for the logo with navigation
The second rule is for the logo without navigation
Again don't do this, CSS is not designed for that.
You basically want to select a sibling, you will find a detailed post in this link CSS Tricks - Child and Sibling Selectors
.div1 ~ .div2{
Do your stuff here
}
This chunk will only take place if .div1 exists in your markup, is that what you wanted?
Edit:
I've noticed that your desired selector precedes the other one, this code will only work if the desired selector in this case .div1 is after .div2 .. CSS doesn't have that you will have to use jQuery
In my html page, I have div with id footer. Inside of that are couple of other divs, and last one of them has p-tag inside. How do I apply css style for that p?
#footer div p {
background-color: #000;
}
#footer div {
float: left;
width: 23%;
border-left: solid 1px;
margin: 0;
padding-left: 5px;
}
The first one does not seem to overwrite the second, which works fine. Could someone give me hint where to find information especially about the order of css selectors?
You can use the :last-child selector to target the last div and its containing <p> tags.
footer div:last-child p{color:#f00;}
Here is an example fiddle - http://jsfiddle.net/vuGpt/
And here is some further reading - http://www.w3schools.com/cssref/css_selectors.asp
There's no real order to CSS selectors, except the order you create. The styles you define will be overridden if you select the same element later in your css. You just have to be aware of how you are selecting your elemnts. A general selector will be overridden by a more specific selector. For example if you defined the following
p{color:#0f0;}
Then this selector will be overridden by your more direct selector as defined above. To overcome this, you can add !important to your rules. That way you can be reasonably sure that that style will be applied regardless of it being overridden later. Unless you accidently use !important again. It can become a mess quite quickly and with well written CSS you chould be able to avoid using !important at all...
Your resulting CSS for the above would become:
footer div:last-child p{color:#f00 !important;}
Hope this helps...
Your CSS is fine. I would suggest checking the structure of your HTML. From the CSS you provided the HTML should look as below:
<div id="footer">
<div></div>
<div>
<p>My paragraph</p>
</div>
</div>
I have tested this and all appears kosher. See fiddle.
I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on
Can you use the word div to name a div class? or id?
for example:
#div.leftcol
or does it just get seen as
#leftcol
The browser will see that as <div id="div" class="leftcol"></div>
I don't follow what you mean, but I think what you're asking is can you use the word div to apply a class to div elements. If that's what you mean, then yes you can, and you do it exactly as you have shown in your question:
div.leftcol { color: red }
That style would be applied to all elements of type div with class leftcol. Without the div part, the style would apply to any element with class leftcol, regardless of what type of element it is:
.leftcol { color: red }
Edit now the question has been edited...
After the edit to your question, it makes a bit more sense (I think). Your first example would apply to an element with an id of div and a class of leftcol:
<div id="div" class="leftcol"></div>
The second example would apply to an element with an id of leftcol:
<div id="leftcol"></div>
Or if you are simply asking whether div is a some sort of reserved word in CSS, no, it's not, so feel free to use it as an identifier. However, that could get confusing (for example, you could end up with selectors like div.div #div)
can you provide an example?
you can use <div class="leftcol"> left content </div>
and then in your css .leftcol { background:red; }
you can address it either div.leftcol or just simple .leftcol
As in?
<div id="div.leftcol">Some content</div>
While it may work for HTML and Javascript it should cause a problem if you try to style it in a CSS stylesheet. As I am sure you know the following
div.leftcol {
color: #efefef;
}
means "Set the text color to #efefef for any div element that has leftcol as a class name" so it would not work. I have no idea if
div.div.leftcol {
color: #efefef;
}
would work but that is just ugly...
I've been making websites for years and theres on thing that really bugs me and confuses me.
I set a link style in the css file for a content div in my website and this successfully styles the links.
However if i create a span or div inside this div with a new link style i end up having to add in !important to various attributes which i can only tell by trial and error.
Is there any way around this or am I doing something wrong?
Thanks
My intuition is that you're having problems with your selector specificity.
Ensure that your new link selectors have a higher specificity than the ones in the enclosing element. Normally this would mean using a selector like div.outerdiv div.innerdiv a.class rather than just a.class etc.
For example:
<div class="outer">
<a class="outerlink" href="#">Outer Link</a>
<div class="inner">
<a class="innerlink" href="#">Inner Link</a>
</div>
</div>
If you use these selectors you may have trouble (depending on css ordering etc.):
a.outerlink { **css here** }
a.innerlink { **css here** }
Even if you use these selectors, it's not guaranteed to work how you want:
.outer a.outerlink {}
.inner a.innerlink {}
However, these selectors should work best, ensuring your innerlinks override attributes:
.outer a.outerlink {}
.outer .inner a.innerlink {}
Make sure you specify all the attributes you want to override in the .innerlink css.
Once you understand specificity, the power of the darkside will be yours.
I think I know what you are referring to, and I solve this problem by adding "a" after the inside span or div css rule.
Let's assume you have a general rule:
a
{
color:white;
}
If you want to override this rule in a div, you have to write
div a
{
color:yellow;
}
and not just
div
{
color:yellow;
}
This is because the link is inside the div, so the first rule is stronger than the third for links.