This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 8 years ago.
I'm trying to find some text inside an element using a css selector, but not include the children of the element. For example:
<div id="information">
This is the text I need
<div>I don't want this text</div>
<span>I also don't want this</span>
</div>
Any ideas?
NOTE: I'm parsing a page so I don't have control over the elements
Apparently not possible using CSS Selectors. With XPath though, if someone is interested:
//div[#id='information']/text()
So you want the loose text inside of #information but you don't want the div and the span? Seems quite simple:
#information {
/* property values */
}
#information > div {
display: none; /* removes content of child div */
}
#information > span {
display: none; /* removes content of child span */
}
I guess you don't really even have to use the child (>) selector, too.
There is no CSS selector to select just the text content of an element. There is nothing illogical about the idea (CSS could have a pseudo-element for the purpose), but currently there is no specification or even draft on such matters.
What you can do is to set styles on an element and then override them on any child element, possibly using a selector like #information * that matches all descendant elements or #information > * that matches all child elements.
Related
This question already has an answer here:
How to prevent CSS color property applied from parent class to child classes
(1 answer)
Closed 4 months ago.
How do I style .parent with color redwithout styling .child?
One solution would be to overwrite the child element style, but in the real world scenario, the child element will have many complex styles and I do not want to touch them, or overwrite these styles, it would be very risky.
What I want is to add the styles only to the wrapper element. In the real world these two elements will be <table> elements
<div className="App">
<div class="parent">
Parent
<div>
<div className="child">child - don't style me</div>
</div>
</div>
</div>
This is how I solved it:
https://developer.mozilla.org/en-US/docs/Web/CSS/all
.wrapper {
color: red;
}
.child {
all: initial;
}
There are other variants, such as revert-layer
This may be the best way to not inherit styles from specific cascade style layers without having to depend/know what are these styles to avoid having them overridden.
Working example: https://codesandbox.io/s/sharp-goldstine-9hongm?file=/src/App.js
In case you want to reset the property in child, you can use unset.
Eg:
.parent {
color: red;
}
.child {
color: unset;
}
This question already has answers here:
Why is a second-child affected by my first-child color property?
(4 answers)
Closed 3 years ago.
Something obvious I may be missing, but I can't figure out why the > selector (which should only select direct children), also styles the nested span #2.
I do get the expected result (only outer span #1 green, span #2 is black) when I add this to the CSS:
span{
color:black;
}
However, I feel it's odd that using just the > selector somehow expands into the nested span, behaving as a space selector targeting all children:
div span{
color:green;
}
Any ideas? (Here's a Codepen I used to fiddle with it)
In short, Inheritance. The style isn't applying directly to the second span. Rather, the second span is "inheriting" its style from the first span.
Look in something like Chrome Dev tools and you'll see this;
Your options here are limited. You could unset any nested spans by resetting them to their initial state;
body{
color: red;
}
div > span{
color: green;
}
div > span > span{
color: initial;
}
<div>
<span>
This is span #1
<span>This is span #2</span>
</span>
</div>
However, this comes with a caveat. This means it won't inherit from anything. Note how it doesn't inherit the red color from the body.
This question already has answers here:
CSS selector by inline style attribute
(3 answers)
Closed 7 years ago.
I have a div which is set to display: 'none' by the framework our company is using.
<div id="mydiv" style="display: none">...</div>
However when it is shown, it is set to display: block, but I need it to be display: inline-block. So I tried to style the div like this:
#mydiv:not([display='none']) {
display: inline-block !important;
}
But it is not working like I was expecting. I want to achieve this with CSS only. Does somebody know how and if this is possible?
try this example: http://codepen.io/anon/pen/WQZada
Here the attribute to check is style, (not display)
#mydiv[style="display: none"] {
display: inline-block !important;
}
Anyway this is a weak approach, since a change in the markup (e.g. a minification of inline stlye, or an editor change) can affect the style (and viceversa).
Just targeting the element by it's id should be enough to override its inline style:
#mydiv {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
But
For the sake of the question, regarding to selection an element by its inline style value, you could target the [style] attibute and check for the desired text value
(Trouble is that you'd need to match the exact written form of the style property)
#mydiv[style*="display: none"] {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have been trying to work out why my css wasn't working when I had
mydiv .myclass { font-size: 24px !important; }
and I just happened to try
mydiv.myclass { font-size: 24px !important; }
and the formatting worked.
What's the difference between the two?
Without the space it means: apply to div elements with the "myclass" class.
With the space it means: apply to elements with "myclass" class which are inside a div.
/*Apply to div elements with the 'container' class*/
div.container{
height: 100px;
background-color: grey;
}
/*Apply to elements with 'container' class which are inside a div*/
div .container{
height: 10px;
width: 10px;
background-color: red;
}
EXAMPLE: https://jsfiddle.net/gdxva1k0/
The space in the first case is a descendant combinator. For example, p .center, would mean an element within a p tag and has class center;
An example for the second one could be p.center, which means all p tag with center class.
This div.myclass targets every div which also has .myclass.
While div .myclass will target every element inside div tag (at any node depth) with class .myclass (AKA descendant selector).
furthermore..
There is also div >.myclass which targets all elements with .myclass which are directly children of div (AKA child selector).
Then there are adjacent sibling selector (div +.myclass)which allow to select an element that is directly after another specific element.
Concluding there's also div ~.myclass which is a general sibling combinator selector; it is very similar to the adjacent sibling combinator selector ; the difference is that that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it.
With the space, it infers a child element of the parent. So
div span
Is any span that is the child of a div. A class can't be a child. That's why it didn't work.
tag.class
Means all elements of type tag and with class .class will take the style.
The first says actually the following:
Select every .myclass thats inside a mydiv element (direct and indirect children).
The second one says:
Select every mydiv element that has a class attribute of myclass
You can find a good reference here
I have a list of DIVs that share the same classes as follows:
<div class="content1"><div class="contentInner">Text1</div></div>
<div class="content1"><div class="contentInner">Text2</div></div>
<div class="content1"><div class="contentInner">Text3</div></div>
...
I want the first DIV with class="content1" to have a different style than the following DIVs of the same class. What is the CSS selector that can accomplish this?
Thanks
Use nth-of type selector.
.content1:nth-of-type(1){
/* your style */
}
Using first-child only works if there is no sibling element before your desired div.
See fiddle here.
CSS has a pseudo selector which is used in such scenario where you need to select the first element from similar elements i.e. :first-child
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
Example:
div.content1:first-child{
/* your css */
}
Js Fiddle Demo
Use :not and :first-child pseudo selector of CSS to give specific css to the first div.
Example:
.content1:not(:first-child) {
/* Common CSS for all divs except first div */
}
.content1:first-child {
/* CSS for first div */
}
you can use the :first-child selector. e.g
.content1:first-child{
text-decoration:underline;
}
fiddle