I have a div called mycontent. In this div there is a h2 element. This element inherits global properties, but I would like to change its color only within the mycontent div. I would prefer not to add new class because I would like to operate only within the css.
I have something like that:
#mycontent {
position: absolute;
bottom: 15px;
left: 10px;
}
#mycontent h2 {
color: #fff;
}
Your point being? I mean, you already have the right CSS to achieve what you're asking. The #mycontent h2 {} selector you wrote is right :)
Related
what is the way to child element not inherit parents property?
I know way to child element declare individually property.
I curious that people use another way.
You can either set some styles only for that element:
p{ color:red; }
or overwrite the default inherited styles (like margin in this case):
p{ margin: 0; }
or, in some contexts add a class or an id to add more weight to the selector (adding an id to the p):
div p{ color: blue; }
#myParagraph{ color: red; }
This could be a way
div{
padding:10px;
}
div *{
padding: 0px;
}
But its highly NOT RECOMMENDED for elements with many children
My website here I'm creating for a friend is giving me issues with the input[type="button"]. I only a specific style to be applied to the button in the sidebar ONLY. However no matter what I do it effects all buttons.
#sidebar.widget-wrap input[type="button"], input[type="submit"] {
clear: both;
display: block;
margin-top: 2em;
width: 100%;
}
How do I make it only effect the go button in the sidebar?
You must duplicate #sidebar.widget-wrap:
#sidebar.widget-wrap input[type="button"],
#sidebar.widget-wrap input[type="submit"] {
}
Otherwise your selector would result in every input[type="button"] that is inside #sidebar.widget-wrap and every input[type="submit"].
The comma has no special meaning, it only combines two (or more) selectors. The result will always be the same if you use two separate selectors instead of the combined one:
div a, div span { color: yellow }
/* is the same as */
div a { color: yellow }
div span { color: yellow }
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 am alittle confuse about CSS Selectors, I understand that we can group multiple css selectors with a comma if they share similar attributes, but what about multiple css selectors without commas e.g like this:
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
When you use the comma, like
#menu, .item
you are saying:
all elements whose id is menu AND all elements whose class is item
When you nest selectors without the comma, like
#menu .item
you are saying
all elements that has class item inside a container whose id is menu
This selects descendants.
.ui-datepicker-rtl .ui-datepicker-prev will pick all decendants of elements with class ui-datepicker-rtl who have class ui-datepicker-prev
Say you had a Css style defined below .
div
{
background: url(themes/default/images/backgrounds/lh-navigation.png) repeat-x;
}
.child
{
backgroud-color:#FFFFFF;
}
<Div id="tempDiv" class="child"></Div>
I don't want the backgroud style applied to element tempDiv. How can i remove the parent style for the a specified div element. Is there any way to make it ?thanks
In CSS children inherit properties from parents. You'll have to override the style of the parent in your child style declarations. In this case, since it is a background you are trying to override your .child style declaration will look like this:
.child {
background-image: none;
background-color: #FFFFFF;
}
As the others above have pointed out you could also expand on the selector and write a new rule for the id attribute on the element:
#tempDiv {
background: none;
}
try:
.child#tempDiv{
background: none;
}
note the absense of whitespace between the id and class since it is on the same element.