This question already has answers here:
Is there a CSS selector for text nodes?
(3 answers)
Closed 3 years ago.
I want to select everything after the div with class="good" and make them disappear.
<div class="amazing">
<div class="good"></div>
"bad text"
<a class="bad"></a>
"worse text"
<a class="worse"></a>
</div>
I tried this but it didn't get rid of the texts.
.amazing a:nth-last-child(n+4) {
display: none !important;
}
Try this:
<div class="amazing">
<div class="good">This is good</div>
<a class="bad">bad text</a>
<a class="worse">worse text</a>
</div>
and
.amazing a {
display: none !important;
}
If I understand it well, you wish to hide all texts after the div of .good
/*Select All But The First One*/
.amazing div:nth-child(n+2) {
display: none !important;
}
<div class="amazing">
<div class="good">"good text"</div>
<div class="bad">"bad text"</div>
<div class="worse">"worse text"</div>
</div>
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last month.
Good day all,
I have an a tag with class "WORKSHEET_block" and which is contained in 3 other div.
The css to style is (which does not work):
.WORKSHEET_block < .fc-daygrid-event-harness < .fc-daygrid-day-events < .fc-daygrid-day-frame {
background-color: green !important;
}
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a class="WORKSHEET_block">My Value</a>
</div>
</div>
</div>
I know if it was the other way around from parent to child we would use ">" from the parent to the child.
Is there anywhere I can select the parent from the child?
.fc-daygrid-day-frame:has(.WORKSHEET_block) {
background-color: green;
}
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a class="WORKSHEET_block">This is the child using the class</a>
</div>
</div>
</div>
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a>this child does not have any class</a>
</div>
</div>
</div>
Using :has relative selector. I have inserted an extra HTML code it doesn't have a WORKSHEET_block class, so the style is not applying to it
This question already has answers here:
What CSS selector can be used to select the first div within another div
(4 answers)
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 2 years ago.
Hi can you please help with some css,
I have this code
<div>
<div>
<input class="test"/>
</div>
</div>
<div>
<div>
<input class="test"/>
</div>
</div>
<div>
<div>
<input class="test"/>
</div>
</div>
I want to change some properties only in my first input, can somebody help me solve this ?
Thanks
In your case, you can use these css rules:
div:nth-child(1) div input.test {
color: green;
}
or
div:first-of-type div input.test {
color: green;
}
This question already has answers here:
Using only CSS, show div on hover over another element
(14 answers)
Closed 5 years ago.
i Have used bootstrap and css , here is my code
<div class = "row" id="parent"=>
<div class="col-md-8" id="ClildDiv1">
//Some Content
</div>
<div class="col-md-4" id="ChildDiv2" style="display:none">
//Some Content
<div>
</div>
Now i want on hover on
<div class="row Parent>
All its Child should be visible in this case
<div class="col-md-4 ChildDiv2">
Any Help Would Be Appreciated And i want to achieve that only by CSS styling
You want one of the sibling selectors. General sibling ~ or next sibling +
.ClildDiv1:hover ~ .ChildDiv2 {
display: block;
}
See fiddle here
Or, the parent hover for any child div would be
.Parent:hover > div {
display: block;
}
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 1 year ago.
Unless it's not supposed to but I can't seem to get nth-child to acknowledge the class selector.
I have say 4 divs inside another div, all of various classes and ids. I need to select the first instance of a div with said class. For example:
#content .foo:nth-child(1) { margin-top: 0; }
And obviously again with first-child to get the same affect, but it doesn't affect any of the divs.
Now if I want to force it to work with that div I can do this:
#content .foo:nth-child(3) { margin-top: 0; }
It just so happens that it is the 3rd div in #content, which is pointless because I need to get the 1st instance of anything with that class.
<div id="content">
<div id="action-bar"> </div>
<div id="message"> </div>
<div class="table"> </div>
<div class="clear"> </div>
</div>
Here's a sample of the HTML, I've tried nth-of-type as well like this:
#content .table:nth-of-type(1) { margin: 0 }
Again it only responds when I say nth-of-type(3).
EDIT:
I've set up a working example of the problem I'm having here: http://jsfiddle.net/aHwS8/
Try the :nth-of-type() pseudo-selector instead:
#content .foo:nth-of-type(1) { margin-top: 0; }
Note that :nth-of-type() counts the elements with the same name. So .foo:nth-of-type(1) will not select the first element with the class foo but any first element that is the first in the list of elements grouped by the same name. If you have some document like this:
<div>
<i class="foo">1</i><i>x</i><i class="foo">2</i>
<b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>
.foo:nth-of-type(1) will select the elements <i class="foo">1</i> and <b class="foo">3</b> as both are the first of its own type.
This is an old post but I ended up here seeking for an answer for similar problem. Perhaps this will help someone.
I had the following structure, wanting to select the n-th "foo"-div:
<body>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
</body>
The trick was "go back" and select the parent element with repeated siblings, in this case .container and then select its child(ren):
.container:nth-of-type(3) .foo {
styles here
}
I think you're using the wrong selector, try:
#content .foo:first-of-type { margin-top: 0; }
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Complex CSS selector for parent of active child
I want to match a with id "breadCrumb" only if it has a child span id "userName".
Match:
<div id="breadCrumb" class="nav">
<span id="userName">esac</span>
</div>
But not match:
<div id="breadCrumb" class="nav">
<span id="navtrail">...</span>
</div>
I want to set #breadCrumb { display: none; }, but I don't want to hide it in the second case.
Firstly, these two elements aren't on the same page are they? If so it's invalid HTML as you can't (shouldn't) duplicate IDs.
You can't do this with straight CSS. My advice would be to restate the problem:
<div id="breadCrumb" class="nav userName">
<span>esac</span>
</div>
or
<div id="breadCrumb" class="nav navtrail">
<span>...</span>
</div>
then you can do things like:
#breadCrumb.navTrail { display: none; }
or
div.nav.navTrail { display: none; }
Applying multiple class selectors (previous example) isn't supported in IE6.