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
Related
I need to style element by page-id. I use for it this:
.page-id-34 .gallery-columns-9 .gallery-item { }
It is possible to style the same, but in relation to all child of page id 34?
Use a wildcard to match all descendants of an element:
.page-id-34 * {
color: red;
}
If you want to style only direct div elements for example it would be
.page-id-34 > div {
color: red;
}
I just got to that. I use:
.parent-pageid-34 .gallery-columns-9 .gallery-item { }
and it works!
Thank you for your participation.
I have a custom element x-foo which I have defined a custom CSS property on to set the background-color called --xbg.
I use the element with elements of itself as children as so:
<x-foo class="outer">
Outer
<x-foo class="inner">
Inner 1
</x-foo>
</x-foo>
When I set --xbg on the outer, that value overrides the value of the inner element:
x-foo.outer {
--xbg: orange;
}
x-foo.outer x-foo {
--xbg: red;
/* Doesn't work, have to use !important?!?!*/
}
I've used the inspector in Chrome and can see that the child definition indeed is "lower" then the parent.
I have to "force" it to get higher with !important, which then has all sorts of other implications.
x-foo.outer x-foo {
--xbg: red !important;
/* Works */
}
Why is the child not overriding the parent property?
Here's a plunker for this with some more examples:
https://plnkr.co/edit/uZxg7G?p=preview (Only works in Chrome)
Simpler JSBin for other browsers:
http://jsbin.com/wuqobejeci/edit?html,output
the best way to solve this is to say the style only applies to the class contentwrapper from that host down
<style>
:host {
display: block;
}
:host > .contentwrapper {
padding: 1em;
background-color: var(--xbg, yellow);
}
</style>
Like that,
Here is a working Fiddle
The element has lower priority than the class. Try
x-foo.outer {
--xbg: orange;
}
x-foo.outer x-foo.inner {
--xbg: red;
}
Thought this was worth trying just based on Andrew's answer above -- just using the host style alone seems to work:
<style>
:host {
display: block;
padding: 1em;
background-color: var(--xbg, yellow);
}
</style>
https://jsfiddle.net/6tzoacxr/
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.
#top a {
color: #C6D6CA;
margin: 0 25px;
text-decoration: none;
}
.mainlink a {
display: block;
height: 100%;
width: 100%;
margin: 0;
}
.mainlink div sits somewhere in the #top one. Why's that the #top a (parental) definition of margin overwrites the one set in .mainlink a? How to change that behaviour?
You can fix it by changing your rules:
#top a {}
#top .mainlink a {}
This is called selector specifity. See also: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Since CSS "cascades" the color will apply to any of the element's children. You'll need to specify the color for the child and possibly need to add an "!important" to the end of the property declaration.
Named ids have a higher precedence than classes when the style sheets are cascaded.
http://www.w3.org/TR/CSS2/cascade.html
You can use margin: 0 !important to force the override.
The #top a selector has more specificity than .mainlink a. ID selectors greatly increase the specificity of a selector.
Each ID increase the specificity of the selector by a factor of 100. Each class increases the specificity by a factor of 10.
That being the case, I'd either:
A. Replace the ID with a class or
B. Add an ID to the second selector.
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 :)