I have a class named containner that has a lot of rules common to a lot of divs but I also want to get some specific details to those divs. I wonder if I can do something like this:
.containner {
common rules
}
.containner, #somedivid {
specific to some div rule
}
Cheers
To select an element inside your container, do this
.containner #somedivid{}
A comma will just style both elements individually, the CSS I posted can be used to be quite specific on a selector, using itself and however many parents it has.
.containner, #somedivid{color: red;}
is the same as
.containner{color: red;}
#somedivid{color: red;}
If you wanted all divs inside .containner to be 100x100px but one red and one blue, you can do something like this:
.containner *{border: 1px solid black;} /* Makes ALL elements inside .containner have a black border */
.containner div{width: 100px; height: 100px;} /* Makes all DIVS inside .containner 100x100px */
.containner div#somedivid{background-color: red;} /* Specific rules with a higher priority selector */
.containner #somedivid{background-color: blue;} /* Specific rules with a lower priority selector */
Related
My css:
.pic img:hover {
border: 1px black solid;
}
My html:
<div class="pic">
<img src="hey.jpg">
<img class="overlay" src="overlay.jpg">
</div>
I have an "overlay.jpg" that is placed in the bottom corner of the first image.
Problem with the css is that the overlay gets the :hover effect too.
The actual code is very complicated, I know the best solution would be to add a class to the first image and hover only that, but that will take more time than what i currently have to get this fixed.
The code has a class for the overlay images though, so I'm asking if theres a way to override the hover by setting some other css for the overlay class.
However .overlay:hover { border: none; } does not do the trick, even if i put it after the css above.
Your rule is less specific than the previous one so it is getting overridden.
You have to change it to:
.pic .overlay:hover { border: none; }
The concept
Specificity is the means by which a browser decides which
property values are the most relevant to an element and gets to be
applied. Specificity is only based on the matching rules which are
composed of selectors of different sorts.
How is it calculated?
The specificity is calculated on the
concatenation of the count of each selectors type. It is not a weight
that is applied to the corresponding matching expression.
In case of specificity equality, the latest declaration found in the
CSS is applied to the element.
Reference: Specificity
As long as overlay always comes after the first image, you can use :first-child to pick only the first image:
.pic img:first-child:hover {
border: 1px black solid;
}
It's supported in everything (excluding IE6, but I don't count that as a thing.)
You can also use the :not selector:
.pic img:not(.overlay):hover {
border: 1px black solid;
}
This way you won't have to worry about the order of the images and also don't have to worry about specificity by including another reset style.
I'm trying to merge two CSS files from different vendors. The first one defines
body.mine div {border:1px solid red}
The second one
.blue-border {border:1px solid blue}
In the generated HTML, you can find
<div class="blue-border">hello</div>
This looks red, not blue. I can't modify the HTML, nor the first CSS code. My only "hope" is to modify the second CSS. Any hints? Thank you very much!
Example:
<html>
<head>
<style>
body.mine div {border:1px solid red}
.blue-border {border:1px solid blue}
</style>
</head>
<body class="mine">
<div>hallo</div>
<div class="blue-border">hello</div> <- looks red, not blue as I want
</body>
</html>
Just make the selector more specific:
body.mine div.blue-border {border:1px solid blue}
This tells the browser to look for a much more specific element: A div with a class of blue-border that is a child of a body element that has a class of mine.
Yours just said "select anything that has a class of blue-border" and this was way less specific than the previous selector.
http://jsfiddle.net/Kyle_Sevenoaks/tcWK5/
You just need a selector more specific than body.mine div, so that it overrides the less specific selector. Try something like:
body.mine div.blue-border {border:1px solid blue}
This could also be a perfect use case for !important.
.blue-border {border:1px solid blue !important}
I realise that the use of !important is often frowned upon, but .blue-border is obviously a utility class that only does one thing, which means that the class shouldn't be used if the intented result is a red border.
In this instance I would prefer !important over the use of an over qualified selector, because over qualified selectors could have a major performance impact.
If you desire to change any property in all elements with css, do NOT define this property in specific elements:
html body div#very .specific {
/* Any prop that is NOT the ones you want to apply generally */
margin: ...
font-weight: ...
/* NOT color, nor background, etc */
}
/* These now will catch in the above too */
.blue{
color: blue;
}
.back-yellow{
background: #ff0;
}
Explanation: the color and background will apply on all elements that don't have a more specific definition of color/background.
So, only define color in specific CSS path if you want to override the general rules.
Is there a way to import the styling of a single CSS selector into another CSS selector and add to it or rewrite properties from it.
Let's say:
.original_class{
background:black;
color:white;
}
.overwrite{
#import(.original_class); /* I know this doesn't work */
color:blue;
border:1px solid green;
}
I can accomplish this by just redeclaring the .original_class and assigning new values (since CSS styles are rewritten from top to bottom), but this will replace the attributes of the original CSS class. What I want is to inherit its properties into another class without having to write them again (duplicate).
Not directly, no.
You could do something like this in your HTML:
<div class="original_class overwrite">...</div>
This will have the same effect, but you will have to do this for every element you want styled that way.
There is also the option of using a CSS pre-processor, like SASS, which supports inheritance/mixins.
You can add the .overwrite selector to the first rule by separating it from the existing selector with a comma (grouping selectors), so the selector rule becomes .original_class, .overwrite:
.original_class,
.overwrite {
background: black;
color: white;
}
.overwrite {
color: blue;
border: 1px solid green;
}
Also, when you write:
this will replace the attributes of the original CSS class
there is no such thing as attributes and class in CSS, not with the intended meaning of OOP I guess. There are rules, selector rules (to select HTML id, classes, elements, attributes and other pseudos), declarations, properties and values.
Unfortunately not. At least not without one of those fancy CSS plugin thingies that I wouldn't touch with a mile-long pole...
Of course, there's nothing stopping you having multiple classes on a single element.
I have a button with a rollover using jquery ui to add the class "ui-state-hover" so that the background color/color change on rollover.
Here is the css for the rollover:
.ui-state-hover { border: none; background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x; font-weight: bold; color:#fff !important; }
I am trying to add seperate css for a rollover on another button which has the class "ui-priority-cart" by adding this css:
.ui-priority-cart .ui-state-hover{color:#00dfff !important;}
however it does not seem to be affecting the color as it still remains white on rollover. Am I missing something?
Your CSS rule should be:
.ui-priority-cart.ui-state-hover { /* your rules here */ }
Note the lack of a space, this will apply to an element with both classes ui-priority-cart and ui-state-hover, which I believe is what you're looking for.
The difference is, the CSS you posted would apply to elements with a class of ui-state-hover inside an element with a class of ui-priority-cart.
That applies to any element with the class .ui-state-hover that is a child of an element with a .ui-priority-cart class.
you may be looking for .ui-priority-cart.ui-state-hover which means any element that have both classes.
Find if class has border in css only, by using attribute selector or by any other means.If it is not having then apply the border.Intention is Not to fall back on to either jquery. Is this possible to acheive?
Edited to include response from #nag (OP):
In IE8 there is no border for select. So I'm trying to do a css reset like this:
select, input[type="file"], textarea {
border: solid 1px #7F9DB9;
}
The problem is it is overriding any preexisiting style because of specificity. I tried to use expression filter but with DocType in IE8 it does not seem to work.
CSS has no concept, or implementation, of if/else statements, so this is not possible in CSS only.
However, if you define the border for an element, and then later redefine that border the second statement will override the first (assuming an equally specific selector), so I'm unsure as to why you need to apply a border only if the element doesn't already have a border defined:
div {
border: none; /* removes the border */
}
/* other stuff */
div {
border: 1px solid #f90; /* defines the border */
}
Similarly:
div {
border: 5px solid #0f0; /* defines the border */
}
/* other stuff */
div {
border: 1px solid #f90; /* re-defines the border */
}
If you can define your use-case it might be possible to help you further.
Edited to address the further information in the question:
In IE8 there is no border for select. So I'm trying to do a css reset like this:
select, input[type="file"], textarea {
border: solid 1px #7F9DB9;
}
The problem is it is overriding any preexisiting style because of specificity. I tried to use expression filter but with DocType in IE8 it does not seem to work.
If the problem is specificity, then the only options you have are to either increase the specificity of the selector you want to apply, ideally use an id, or multiple ids, in your selector (the id of an ancestor element is fine) since that's the most specific selector available.
Or, you can decrease the specificity of the selector you want to override.
It's worth noting that the select element is difficult to style reliably since it's often rendered by the underlying OS, rather than the browser itself, for a consistent look within that operating system.
You have three alternatives:
Use JavaScript - that has logic, so you can check whether it has a border or not and then do something with the result. You can use a library like jQuery or MooTools to make it easier.
Make this selector more specific, so that it only applies to elements that you want it to.
Make your other selectors more specific with classes, IDs, or nested selectors (like form textarea).