I have a <div> element with a <p> element inside:
<div style="font-size:10pt; color:red;">
This is my Parent Div.
<p>This is my Child Paragraph.</p>
My parent Div Ends Here.
</div>
How can I prevent my paragraph from inheriting the CSS properties set to the <div>?
In your case the best way is to just over right the styles that the <p> element is inheriting:
So in your CSS file, which you should be using instead of inline styles:
.parent-div {
font-size: 10pt;
color: red;
}
.child-paragraph {
font-size: 12pt;
color: black;
}
In your child node -
<p style="font-size:12pt; color:black;">This is my child</p>
Just set the inline style to whatever you want.
You can use the > selector in CSS to select the immediate child p of div.
Fiddle link
div > p {
font-size:1.2 em;
color: green;
}
Related
HTML:
<p>I`m p</p>
<a>I`m a</a>
<h2>I`m h2</h2>
CSS:
:not(p){
color:red;}
:not() pseudo class should select all the elements inside the HTML document, that aren`t "p", and give them red color, but when i run the code "p" is red too, just like all other elements.
here you need to specify color for all html elements. as there is no color set to elements, the color from your selector is getting set to all elements available.
Here is what you need to add in your style:
*{
color: black;/* the color you will want for all or p elements. */
}
Notorious Zet you can fix this error by giving the p element a class and then using the not pseudo selector
The HTML
<p class = "notRed"> This is a p element </p>
<h1>This is a h1 element</h1>
The CSS
p:not(notRed){
color: red /*This will apply to all p elements with the class of notRed*/
}
Need to specify the color of <p> tag first. See the example from w3schools.
p {
color: black;
}
:not(p) {
color: red;
}
<p> I am p </p>
I am a
<h1> I am h1 </h1>
I have a simple layout where I want the text red if it is not in the footer element. It works with p tags, a tags etc.
But when I try it with footer tag it doesn't work.
My code is below:
p {
color: #000000;
}
:not(footer) {
color: #ff0000;
}
<h1>This is a heading</h1>
<footer>This is a footer.</footer>
<div>This is some text in a div element.</div>
Link to W3Schools!
You need to select the parent which is body (otherwise footer will inherit red from body as per your rule stated), in order for :not(footer) to work.
Regards to p its a matter of CSS specificity
p {
color: #000;
}
body > *:not(footer) { /* note that having :not(footer) is the same as *:not(footer), the wildcard is not necessary */
color: #f00;
}
<h1>This is a heading</h1>
<footer>This is a footer.</footer>
<div>This is some text in a div element.</div>
<p>This is some text in a p element.</p>
Link to W3Schools!
you need a parent element to nested for :not() selector to work so here in your code body tag'll work as parent element
body > :not(footer){
color: #ff0000;
}
This is your code:
:not(footer) {
color: #ff0000;
}
That sets all elements to red, except the footer.
The problem is that the rule sets the body element to red. Then the footer inherits the color.
So your rule actually works (the sibling is excluded), but the footer gets the color nonetheless through inheritance.
Instead or targeting all siblings (except footer), target all children (except footer). This eliminates the inheritance loophole:
body > :not(footer) {
color: #ff0000;
}
<h1>This is a heading</h1>
<footer>This is a footer.</footer>
<div>This is some text in a div element.</div>
Link to W3Schools!
On this answer: https://stackoverflow.com/a/1725486/2519402 to a question, it states:
It sounds like you had h1 .myClass instead of h1.myClass - there's an
important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
I don't have enough points to ask my question as a comment on that answer.
So, based on what is said above, shouldn't the following code work:
<style>
h3 .h3nobtmgn {
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes, but vertical margin styles won't work on an inline element like <strong>. http://www.w3.org/TR/CSS21/box.html#propdef-margin-top
So your CSS selector will target the correct element but the style you applied will have no effect.
For that to work you can try:
<style>
h3 .h3nobtmgn {
display: block;
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes it does.
h1.myClass would change the appearance of
<h1 class="myClass">...</h1>
And h1 .myClass would change the appearance of
<h1> ... <span class="myClass">...</span></h1>
You will see through http://www.w3schools.com/cssref/trysel.asp that when you are doing div p it will select all p inside of div. So, the answer is yes.
here is a sample: https://jsfiddle.net/r5d0kkb5/
which shows selectors for div p and div .B and also div .A for your thoughts.
Code:
<div class="A">
<p >
A
</p>
<p class="B">
B
</p>
</div>
Css:
div p {
background-color: cyan;
}
div .B{
font-size: 32px;
}
div .A{
color: red;
}
Is it possible to define a style this way? The class child in this example is red unless it's wrapped in a parent class where I want it to reset so that it takes the color defined in the style attribute of parent.
.child {
color: red;
}
.parent > .child {
color: _clear_;
}
<div class="parent" style="color:blue;">
<div class="child">Some Text</div>
</div>
I think color: inherit; for .parent > .child is what you are looking for:
.child {
color: red;
}
.parent > .child {
color: inherit;
}
<div class="parent" style="color:blue;">
<div class="child">This will be blue</div>
</div>
<br/>
<div class="child">This will still be red</div>
JSFiddle for sample
If you are using valid selectors, like in your example, you want to use inherit:
.child {
color: red;
}
.parent > .child {
color: inherit;
}
However, if you were looking for something more complicated like "style the child based on the parent not having a specific attribute", that may be out of reach with pure CSS. Also, some child elements may not be able to logically inherit a style from a parent, so be sure to set the "parent" style rule on a parent that the child can inherit from and that you have in mind for the rule (so not so high up the chain that you didn't intend that color for that scenario). For instance, in the above example if the parent did not have the inline style rule, there would be no color rule, so the child would pick up a value from somewhere higher up.
Assuming I wanted to attribute the text-shadow: green; attribute to every <h2> element occouring inside an element with the classes .dark and ux-bannerwhat CSS code would achieve this?
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
As in the above example <h2> element will be wrapped in a <div> with varying classes attributed to it.
What would be the best way to apply the text-shadow: green; property to the <h2> element when occouring within elements that have the .dark and ux-banner classes attributed without making reference to the <div> immediately surrounding the <h2> element
I believe you're looking for:
.dark.ux-banner h2 {
text-shadow: green;
}
That means: "Set text-shadow: green on all h2 elements that are descendants of an element with both the classes dark and ux-banner.
Alternately, if you want to be somewhat specific:
.dark.ux-banner div h2 {
text-shadow: green;
}
(Only applies to h2 elements within div elements within .dark.ux-banner elements.)
Or hyper-specific:
.dark.ux-banner > div > h2 {
text-shadow: green;
}
(Only applies to h2 elements that are direct children of div elements that are direct children of .dark.ux-banner elements.)
The key bit above is really that .dark.ux-banner (with no spaces) means "an element with both of these classes." The rest is just descendant or child combinators.
You will need
.dark.ux-banner h2{
text-shadow:green;
}
What this does is selects the elements that have the class .dark then checks if it has the class .ux-banner then selects all h2 inside that
.dark.ux-banner h2 { text-shadow:green; }
http://jsfiddle.net/YjGhw/
Here is the demo http://jsfiddle.net/tFScD/2/
<div class="demo">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
.demo div h2{
text-shadow:2px 2px green;
}
It's simple. Just use the following:
.dark.ux-banner h2 {
text-shadow:green;
}
This means every h2 element inside an element with these classes will have the text-shadow:green propperty no matter if the h2 element is inside a div or not.
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>
TARGET THIS ELEMENT
</h2>
</div>
</div>
or
<div class="dark ux-banner">
<h2>
TARGET THIS ELEMENT
</h2>
</div>
will work the same ;)
.dark.ux-banner h2{
text-shadow:0 0 4px green;
}
the markup
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
demo: http://jsfiddle.net/cQcbp/