So, I am basically having this problem where I am trying to change the font color of all the child elements inside a tag- direct or indirect.
I don't know if it shouldn't be inheriting that property but it is not working in my case. I am putting the style of the parent color:"white" but unless it is a direct child text it is not changing the color.
export const NgoBar = () => {
return (
<div style={{backgroundColor:"red", width: "55vw", margin:"auto", color:"white"}}>
Some text
<div style={{display:"flex",flexDirection:"column",backgroundColor:"red", padding:"10px"}}>
<span>Some different text</span>
<span>From somewhere</span>
</div>
<div></div>
</div>
)
}
This gives the result
It doesn't change the text of the children element - just the direct text of itself. And I find it a bit odd. So just to change the color of all the text inside a parent element, I have to go to all the element and add a personal styling to give it a white text. Just wanna know is it usual ? If yeah then how to turn all the text inside a parent element to white.
In your way you apply color only to the current tag. It's an inline style. See below. Font color is inheritable:
.container {
color: green
}
<div class="container"> Some text
<div> <span>Some different text</span> <span>From somewhere</span> </div>
<div></div>
</div>
Then try this:
.container div,
.container span {
color: green
}
Related
css doesn't select the first class
:not(:first) doesn't work because .callout is wrapped by other container
.callout:not(:first) {
color: red;
}
<div class="d-flex">
<div class="flex-fill">
<div class="callout">
Text A
</div>
</div>
<div class="flex-fill">
<div class="callout">
Text B - only this set color red
</div>
</div>
</div>
Select the .callout element whose parent is not the :first-child of its parent element
.flex-fill:not(:first-child) .callout {
color: red
}
Or just revert the logic and target the :last-child
.flex-fill:last-child .callout {
color: red
}
Or target the .callout inside the second parent element, no matter how many .flex-fill siblings you have
.flex-fill:nth-child(2) .callout {
color: red
}
Codepen example
Anyway, I don't recommend to use this kind of selectors or to rely on a specific markup structure because this approach can easily cause maintainability problems as the code grows and, if possible, I'd suggest to place instead a specific class for this purpose on the right element.
I am learning Selectors and not.
What I am trying is to PUT the text of the span in color red BUT NOT the text of the link, combining both. It is just to learn.
My HTML code
<div>1
<p>2
<span>Here red
<a>Here NOT red
</a>
</span>
<div>3
</div>
</p>
</div>
What I am trying to do with CSS
div p span:not(:nth-child(0)) {
color: red;
}
/* Or */
div p span:not(a) {
color: red;
}
Anyone can help me? I do not want to set another rule for A. It is just to learn as I said.
Thanks!
There were a couple of issues with your page. One is that you had an extra div closing tag. Second, the a tag defines a hyperlink, so it should have an href attribute. Your a tag had no attributes.
Take a look at this snippet
span:not(a) {
color: red;
}
<div>1
<p>2
<span>Here red
Here NOT red
</span>
</div>
</p>
</div>
Alternatively, you could just close the span tag before the a tag, and then just select the span element.
I have an editable body with a div:
<body contenteditable="true">
<div class="paragraph">Text</div>
<body/>
And a :before style:
div.paragraph:before {
content: "☑";
}
Fiddle: http://jsfiddle.net/uy9xs5p0/
In Firefox I can put the cursor at the beginning of the text and press backspace and the check mark gets deleted. How to prevent that?
You are setting the contenteditable in the parent div, therefore when erasing, you are deleting the div.paragraph, so the pseudo will be gone.
See that if you set the property in the child div instead, you can make it work.
div.paragraph:before {
content: "☑";
}
<div>
<div contenteditable="true" class="paragraph">Text</div>
</div>
When this issue is reproduced, (via this fiddle, for instance) the developer tools show that div.paragraph is removed. Only a text node remains.
becomes
To stop the div from being removed, don't give its parent contenteditable. Use this instead:
<body>
<div class="paragraph" contenteditable="true">Text</div>
</body>
Fiddle: http://jsfiddle.net/5y00q6ya/3/
You are not editing the :before content.
It just removes the whole .paragraph element once it gets empty, or if you backspace when you are at the beginning of the tag.
The other answers explain the problem. If a div inherits its edit-ability from its parent, it is possible to remove the child div itself and together with the div also the before-content.
In order to prevent this, it is necessary that the editable div must not be placed in an editable parent. This makes it necessary to put every editable div into a non editable parent div to preserve the editable child div.
The following example shows this
div.node {
margin-left: 1em;
}
div.paragraph:before {
content: "☑";
}
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Major</div>
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Minor</div>
</div>
</div>
Possible workaround this problem. This seems to working as you want it to be.
<div contenteditable="true" class="upper-div">
<div class="paragraph">Text</div>
</div>
div.upper-div:before {
content: "☑";
display:inline-block;
}
.paragraph{display:inline-block;}
Sure this is a too easy question but incredibly I did not understande why this code does not run as desired.
HTML:
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
CSS:
div:not(.remember) .foo
{
color:red;
}
Here the JsFiddle.
I would like that every item with class .foo OUTSIDE a parent with class .remember will be red, but it seems that "not" clause does not fire.
Where is my error?
Your upper most <div> doesn't have .remember, it passes your selection and so .foo has styles changed. Use the child combinator.
Your selection requires that the parent that isn't .remember is also a <div>, because you haven't given your second .foo a parent, in this case, its parent will be <body>. If you don't make this restriction, it is black in colour, as expected.
:not(.remember) > .foo {
color:red;
}
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
Here is a working jsfiddle
The a.foo was not inside a div, it is fixed. The div:not(.remember) .foo expects the link to be inside of a div.
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be inherited)</a>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
</div>
There was no style for div.reminder .foo, it should specifically inherit from the parent style.
div:not(.remember) .foo
{
color:red;
}
div.remember .foo { color: inherit; }
In the above fiddle, I added the first line which should represent any styles already set to the page (parent containers and etc). Its purpose is to play with it in order to see how the inner content behaves. You can remove it safely, the behavior will be as expected.
The div.remember .foo will simply inherit them rather than force something else. However
a.foo{color:red;}
.remember a.foo{color:black;}
This will cause all .foo elements to be red, unless it is nested inside the parent .remember, it will then be black.
http://jsfiddle.net/92gnt7qt/
I am trying to adjust the CSS so the "product" and product information is centered and not floated to the left I cannot adjust the HTML as its given via a shortcode thats added into the WP post but maybe I could wrap it in a div?
HTML:
<ul class="products ribbon">
<li class="product last first">
<a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
<div class="thumbnail">
<span class="onsale">Sale!</span>
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />
<div class="thumb-shadow"></div>
<strong class="below-thumb">Estella Rose Designs</strong>
</div>
<span class="price"><span class="from">From: </span><del><span class="amount">$25</span></del> <ins><span class="amount">$19.95</span></ins></span>
</a>
<div class="buttons">
Select options</div>
</li></ul>
CSS:
CSS
Okay, let's try this again now that I understand your question better. So you want to center the <ul> element as a whole? That is a lot simpler than what I originally thought you were going for.
To do that, all you need to do is wrap the <ul> element in a span tag that is set to display as an inline-block. Then set the containing element so that its text is centered.
Try this:
<html>
<head>
<style language="text/css">
/*<![CDATA[ */
#test1 {
text-align: center;
}
#test2 {
display: inline-block;
text-align: left;
}
/* ]]> */
</style>
</head>
<body>
<div id="test1">
<span id="test2">
<!-- Place your <ul> element here -->
</span>
</div>
</body>
</html>
how it works
The "test2" element is set to display as an inline-block, which means it displays inline with the text. This means that it can then be affected by properties that manipulate lines of text, such as "text-align".
Setting "text-align" to "center" on the "test1" element makes the inline content -- the "test2" element in this case -- within it become centered on the screen.
The standard way to center a block is to set the "margin-right" and "margin-left" properties to "auto", but that only works for elements that are displayed as blocks and that have a width that is less than 100%.
I would just put it in a div and float it next to another div with nothing in it.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Like in step 8 in this link.
The reason that it looks like the text "Sale!" is floated to the left is that <img> elements display as inline blocks by default, so the image is on the same line of text as the words "Sale!". A <br /> tag immediately following the text "Sale!" would solve that problem; but you said you can't modify this HTML, right?
Given that restriction, here is how I was able to solve the problem...
Surround the HTML from your example in a <span> tag and assign it a class. I used "test" as my class name".
Then Place this CSS in the head of the HTML document:
<style language="text/css">
/*<![CDATA[ */
.thumbnail img {
display: block;
}
.test {
display: inline-block;
}
.test .price, .test .below-thumb {
display: block;
text-align: center;
}
/* ]]> */
</style>
why it works
The selector for making the image display as a block solves the problem of the missing <br /> tag.
The span tag with which you surrounded the HTML displays as an inline block. This means that it will collapse around its contents, giving you a box within which you can center the text.
Making the items that contain the text display as a block causes them to take a width of 100%, filling the surrounding box
The inclusion of "text-align: center" is what finally makes the text display as centered within its container