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.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last year.
how to specify CSS for an element without any grandchild elements? e.g.,
<div class="foo">
<ul></ul>
</div>
<div class="foo">
<ul><li></li></ul>
</div>
// hide the <div> whose child <ul> is empty, how?
div.foo {
display: none;
}
Hey there is :empty selector in css which allows you to do like this.
Javascript method to get what you asked for
But If you want to hide other things you should use javascript
:has is experimental
A simple way of doing this
let text = document.querySelector("div.foo > ul");
if(text.innerHTML == ""){
// set your things
document.querySelector("div.foo").style.display = "none";
// you can delete this thing too but this is just an examplee
}
using :empty selector
If you don't wanna use javascript then this method is also good
Simply use
div > ul:empty{
display:none; // or any styles that you can see
}
For just illustration purpose :
div.foo > ul{
background-color:blue;
height:30px;
}
div.foo > ul:empty{
display:none;
}
<!-- Below is empty ul -->
<div class="foo">
<ul></ul>
</div>
<!-- Below is non empty ul -->
<div class="foo">
<ul>
<li>This is with text</li>
</ul>
</div>
But be carefull
Empty elements are elements that have nothing in them. It cannot even have a whitespace.
There is something called :blank but it is experimental as far as I know.
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
i am trying to bind style in my css style using below format but its not working and i am learner for web development can some one help me please what is mistack?
css
.block-header.row.sample h1{
color: aqua;
}
html
<div class="block-header">
<div class="row sample">
<div class="col-sm-6">
<h1 class="page-title">Pending Approvals</h1>
</div>
</div>
</div>
The problem in your rule is that there are no spaces between your classes, which makes the selector any h1 element with the parent having classes block-header, row, and sample.
You would need to put spaces so that the selector knows these elements are nested inside each other:
.block-header .row.sample h1 {
color: aqua;
}
Learn more about how these selectors work from this FreeCodeCamp guide.
Your style rule is wrong, it should be: .block-header .row.sample h1 instead of .block-header.row.sample h1. When you have a style for an element that's a descendant of another one (in your case .row.sample is a child of .block-header) you should have the parent first, followed by a space (or > if it's a direct child) and then the descendant element, just like you're doing with the h1...
You can see it works with that simple change:
.block-header .row.sample h1{
color: aqua;
}
<div class="block-header">
<div class="row sample">
<div class="col-sm-6">
<h1 class="page-title">Pending Approvals</h1>
</div>
</div>
</div>
You can read more about selectors in mdn.
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 7 years ago.
I "need" to target the other sibling of each of two elements (actually children of siblings) on :hover. I can get the code block below to work, but I cannot get it to work in the reverse. I understand there is no designated method of targeting like this: ".element2:hover + .element1", but I did find this (Is there a "previous sibling" CSS selector?) which had some creative solutions including RTL and some tricky :nth-child ideas. However, I still couldn't see a way to go BOTH ways, but rather just switching directions (I need both).
MARKUP:
<div class="element1">Element 1</div>
<div class="element2">
<p class="child">
<span class="grandchild">Element 2</span>
</p>
<p class="child2"></p>
</div>
<div class="element3">Element 3</div>
CSS:
.element1:hover + .element2 .child .grandchild { background-color: red; }
https://jsfiddle.net/macwise/6u3nj18m/
EDIT: I added a third root child element (.element3) to reflect the real-world case I'm working with.
Update: perhaps my language of "previous sibling" was vague and therefore misconstrued as "parent" (Is there a CSS parent selector?). Parent targeting would probably offer a satisfactory solution too, but I am technically needing to target "one sibling of a parent which comes before another sibling of that same parent." It's simpler than it sounds. :) Hope that clears things up.
you could catch hover from parent and trigger it once you hover a child.
then apply bg to all divs, but the one hovered :
body div {
pointer-events: auto;
}
body {
pointer-events: none;
}
body:hover div {
background: red;
}
body:hover div:hover {
background: none;
}
<div class="element1">Element 1</div>
<div class="element2">
<p class="child">
<span class="grandchild">Element 2</span>
</p>
<p class="child2"></p>
</div>
But, this is for the fun only, you should use JavaScript for this.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS Selector that applies to elements with two classes
I've got the following:
<div class="green-arrow current-plan span4">
<img src="/images/assets/green-arrow.jpg">
</div>
<div class="green-arrow plan-above span4">
<img src="/images/assets/green-arrow.jpg">
</div>
And I want to target plan-above so it's display: none; without affecting other instances of plan-above (which are not green-arrow).
div.green-arrow.plan-above {
display: none;
}
Try this:
div.green-arrow.plan-above {
display: none;
}
Further you can use CSS3 to excluded several classes comma seperated
div.plan-above:not(.class, #id) {
//mark up
}
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; }