Trying to override row class's default left and right margins which are
.row .row {
margin-right: -15px;
margin-left: -15px;
}
Page has multiple rows like
HTML
<div class="row row-padded" id="question1"></div>
<div class="row row-padded" id="question2"></div>
<div class="row row-padded" id="question3"></div>
CSS
.row-padded {
margin-top:15px;
padding-left:25px;
padding-top:10px;
padding-bottom:10px;
}
It works fine if I overide it with id. This works fine for one row
#question1 {
margin-left:0px;
margin-right:0px;
}
but this does not
div[id^='question'] {
margin-left:0px;
margin-right:0px;
}
You need to understand how specificity works. The reason that div[id^='question'] doesn't override .row .row is because it only has one element and one attribute selector (considered the same specificity as a class) while the latter has two class selectors - classes override regular elements in specificity, so it makes sense that two classes combined has more priority than one class and one element. Also remember that an ID overrides both class and element selectors.
If you want the second selector to work, try:
div.row[id^='question'] {
margin-left: 0px;
margin-right: 0px;
}
<style>
.row{
margin-left: 0px;
margin-right: 0px;
}
</style>
Provide these codes in your page so that it will override default properties.
Try to mark the margin properties as important:
div[id^='question'] {
margin-left:0px !important;
margin-right:0px !important;
}
Related
I'm trying to add a bottom margin to the first <div> with a class "unit".
<div id="wrapper-related-albums">
<div class="header">...</div>
<div class="unit">...</div> //add margin-bottom to this one!!!!
<div class="header">...</div>
<div class="unit">...</div>
</div>
#wrapper-related-albums .unit:first-child {margin-bottom:20px;} // doesn't work!!!
#wrapper-related-albums .unit:first-of-type {margin-bottom:20px;} // doesn't work!!!
More General/Flexible Solution
Wesley's answer serves well for your particular html markup, as it assumes the .unit is going to be the second element in the listing. So in your case, that may be so, and his solution works well. However, if someone were seeking a more general solution the following is what should be done:
#wrapper-related-albums .unit {
/* code for the first one */
margin-bottom: 20px;
}
#wrapper-related-albums .unit ~ .unit {
/* code for all the following ones */
margin-bottom: 0px;
}
Using the general sibling selector (~) like this will override all but the first .unit, allowing the first .unit to be anywhere in the wrapper (not just in position #2, and the position need not be known in advance). Here's a fiddle that illustrates it using a color change.
There's a few options, depending on your markup:
Second child with class unit:
#wrapper-related-albums .unit:nth-of-type(2) { }
#wrapper-related-albums .unit:nth-child(2) { }
Adjacent sibling (with class unit) of the first element:
#wrapper-related-albums :first-child + .unit { }
I don't believe there's any way to simply select "the first .unit", but you can add the margin to all except the last one, if it always falls last:
#wrapper-related-albums .unit { margin-bottom: 20px; }
/* negate the above rule */
#wrapper-related-albums .unit:last-child { margin-bottom: 0px; }
Lets say I have in my CSS a color definitions:
.headerColor { background-color: #a6c9e2; }
Now I would also like to define a CSS definition that uses .headerColor:
.header { padding-left: 2px; }
On the CSS level, how can I inherit .header from .headerColor?
I know I can place the two styles on the HTML element (class='header headerColor'), but how can I assign .header to my HTML element and have it pull its parent styles?
You can write like this:
.headerColor, .header { background-color: #a6c9e2; }
.header { padding-left: 2px; }
Now, you just need to set class="header" in HTML.
I have this simple CSS:
.cont div {
margin:10px;
border:1px solid;
}
.mark { /* This get ignored? */
margin:30px;
}
With this markup:
<div class="cont">
<div>a</div>
<div class="mark">b</div>
</div>
I except the div.mark having margin:30px; but at least in Chrome this isn't true because the generic rule .cont div seems to have a higher priority.
Consider I don't want to use !important are there any other way to solve this?
http://jsfiddle.net/xNVRm/
Just make your selector more specific by adding the tag name:
div.mark {
margin:30px;
}
Demo: http://jsfiddle.net/xNVRm/1/
You could also use .cont .mark if you want to avoid using the tag name.
In order to avoid to use the important you need to make your css selector more specific. You can use .cont div.mark. It is more specific than div.mark.
The ".cont div" declaration overrides the ".mark" declaration because it's actually more specific. CSS uses a kind of point system to figure out which rules apply. In your case, ".cont div" specifies both a class and an element inside it, whereas ".mark" only specifies a class.
For the exact rules that should be used by all conforming browsers, see this link: http://www.w3.org/TR/CSS21/cascade.html#specificity
In your case you could fix this by using ".cont .mark" in the second declaration.
Specificity is key to how CSS rules are given a pecking order. Try looking at this article from HTML Dog:
http://www.htmldog.com/guides/cssadvanced/specificity/
You could use div.mark instead, which means any div that has the class of mark, do this.
Looking over this again, I see I wasn't understanding what you were trying to do. I think I see now.
You are is saying - ANY div inside of anything with class .cont will have 10px margin. It's more specific then .mark. .mark is 30px - BUT it's a div that is inside of .cont - so it's 10px. It reads right to left - that is a good way to think about it and check specificity.
I have come to think of things with a more object oriented approach. What do you think about this approach?
HTML
<div class="container section01">
<div class="block a">a</div>
<div class="block b">b</div>
</div>
CSS
.container {
width: 100%;
float: left;
border: 1px solid red;
}
.container .block {
/* you can style these site wide */
}
.section01 .block {
border:1px solid black;
padding:10px;
margin-bottom: 1em;
}
.section01 .block:last-of-type {
margin-bottom: 0;
}
.section01 .a {
background-color: red;
}
.section01 .b {
background-color: lightblue;
}
SASS would make this much easier.
a jsFiddle of this example
a CODEPEN of this on a larger scale
Say I have a <div> like this that is going to have all of the same properties with a background image or something like that:
div.someBaseDiv {
margin-top: 3px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
And I wanted to inherit from it like this:
div.someBaseDiv someInheritedDiv {
background-image: url("images/worldsource/customBackground.gif");
background-repeat: no-repeat;
width: 950px;
height: 572px;
}
Of course I’m pretty sure this is written wrong, and I’m not afraid to ask for help, so can someone tell me how to make this work and include the HTML markup?
The easiest is to add your someInheritedDiv element to the first rule like this.
div.someBaseDiv,
#someInheritedDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
This will tell your #someInheritedDiv to apply the same styles as div.someBaseDiv has. Then you extend this set of styles with more specific to your #someInheritedDiv:
#someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This is how specificity in CSS works.
Use both classes and combine them like so:
.baseClass
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.baseClass.otherClass /* this means the element has both baseClass and otherClass */
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
The markup is as follows:
<div class="baseClass otherClass"></div>
Now, in this fashion you can override baseClass if necessary... and since you don't have to keep adding your new class names to the baseClass definition, it's a bit cleaner.
For this task, I would recommend you use a powerful extension of CSS called LESS. It compiles into CSS or can be used on-the-fly with a javascript file as the link explains.
LESS supports inheritance (almost) as you describe. The documentation has the details (see the section "Mixins").
For your example, the LESS code would be:
.someBaseDiv {
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
someInheritedDiv {
.someBaseDiv;
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
Note that it would have to be .someBaseDiv and not div.someBaseDiv
What you want to do is make some CSS apply to two different types of elements, but allow them to have some differences as well. You can do this using some simple HTML:
<div class="base">
<div class"inherited">
</div>
</div>
And CSS:
.base, .inherited{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.inherited{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This will add the shared properties to both types of div, but specific ones only to derived divs
That really depends on your markup. If your inherited element resides under a div with class someBasDiv, then all child elements of it will automatically inherit those properties.
If however, you want to inherit the someBaseDiv class in any place in your markup, you could just make the element which you want to inherit with, use both of those classes like this:
<div class="someBaseDiv someInheritedDiv">
and your css would be like this:
div.someBaseDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
div.someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
If you want all the inner DIVs with a specific class to inherit from the base class build the HTML markup like this:
<div class="parent">
<div class="child">X</div>
</div>
And the CSS
.parent { border: 2px solid red; color: white }
.parent .child { background: black }
If all DIVs must inherit change .child to div.
See this example on jsFiddle
The following code
// parent // all DIVs inside the parent
.someClass div { }
Means: A top element (any) with the class someClass will add the styles to all its children DIVs (recursively).
#search-box {
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
background-color:#ffffff;
border:0px solid #CCCCCC;
float:right;
padding:8px;
position:relative;
top:0;
width:20em;
}
#search-box {
/*remove all css declaration here*/
}
You can't. You would have to manually reset each of them. If you need to jump between major differences, when a user clicks the element, for instance, you can remove these from the element itself, and put them in a class. So this:
#search-box {
color:blue;
}
Becomes this:
#search-box {
color:red;
}
#search-box.focused {
color:blue;
}
Now any time you need to make radical changes to the display of an element, add or remove the .focused class.
You can't remove all attributes. You should be more specific in your first rule so that it only targets those elements that you desire. Either that or you need to explicitly set the values that you want on the second rule.
The question makes much more sense, if you use classes;
HTML:
<div id="site-search-box" class="search-box">
Then reset the attributes, e.g:
CSS:
#site-search-box {
position: static;
padding: 0;
width: auto;
}