This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 7 years ago.
I want to display the toggle_embed class only if the a element has has-embed class. Is there any way I can solve this using CSS?
<div class="comment HAS_EMBEDDED">
<div class="toggle_embed">Embedded content</div>
<a class="has-embed">#name</a>
<a>Text</a>
</div>
NO. There's no previous selector in css. So, you can't do this just with css, you may use jQuery for this.
But if you want to use pure css solution then what about changing the markup like below?
<div class="comment HAS_EMBEDDED">
<a class="has-embed">#name</a>
<div class="toggle_embed">Embedded content</div>
<a>Text</a>
</div>
Then you can use css like this:
.toggle_embed{
display: none;
}
.has-embed + .toggle_embed{
display: block;
}
Note: Changing the markup, you may have to re-work for your layout.
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 2 years ago.
I'm making a pure CSS animated navbar using the checkbox as a hamburger menu toggler, changing various elements with :checked and the + selector, which I've gotten to work on grand-child elements, but not siblings, I haven't found an adequate solution on the web either. Here's my HTML code, obviously stripped down a little:
.toggler:checked+.menu {
width: 350px;
}
<div class="menu">
<div class="menu-background"></div>
<div class="menu-navigation"></div>
</div>
<input type="checkbox" class="toggler">
<div class="hamburger">
I got it to work on children of the hamburger class, so I'm fairy confident its an issue with the selector
Just put the checkbox input above the ".menu" class div. Then it will work fine.
I just added some background and text to show the result.
Hope this will help you
.menu {
background-color: red;
}
.toggler:checked+.menu {
width: 350px;
}
<input type="checkbox" class="toggler">
<div class="menu">
abc
<div class="menu-background"></div>
<div class="menu-navigation"></div>
</div>
<div class="hamburger">
Try using ~ instead of + to see if it helps you
There are two sibling selectors in CSS:
+ selects the next sibling and
~ selects any following sibling
As of now, there is no previous sibling selector in CSS, so you're going to have to change the order of your elements or use JavaScript.
This question already has answers here:
Is there a CSS selector for element without any class?
(1 answer)
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
(10 answers)
Closed 2 years ago.
I have two div and I want to apply some css on the first div that has no class or id .How can I do it ??
Html:
<div>some content</div>
<div class="text-1">
You can use the :not() selector:
div:not([class]) {
color: red;
}
<div>some content</div>
<div class="text-1">some more</div>
Basically this says select any div that doesn't have the class attribute.
This question already has answers here:
CSS: Select element only if a later sibling exists
(9 answers)
Closed 5 years ago.
I have the following structure, where second element may or may not appear.
<div class="wrapper">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
I want to conditionally set styles on .firstElement ONLY if .secondElement exists.
Is there a way to do this with PURE CSS? With either sibling selectors/ parent selectors?
Thanks!
In general, no. CSS reads forwards/down the DOM - it won't read backwards/up. But with this markup, you could use :not(:last-child)
.firstElement:not(:last-child) {
color: red
}
<div class="wrapper">
<div class="firstElement">target this</div>
<div class="secondElement"></div>
</div>
<div class="wrapper">
<div class="firstElement">not this</div>
</div>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I have this markup:
<div class="container page-content">
</div>
normally the class page-content has a padding:
.container.page-content{
padding-top: 160px;
}
But at a specific page there is a class "item-pagehome" inside my div:
<div class="container page-content">
<div class="item-pagehome">
Some Content ...
</div>
</div>
And in this special case I want to disable the padding-top of the .page-content. But how can I do this?
I try to select:
.page-content:has(> .item-pagehome){
padding-top: 0px;
}
But this does not working ...
How can I select a div only when it is a specific child class, in this
case .item-pagehome?
.container.page-content .item-pagehome {
margin-top: -160px;
}
It cannot be done using CSS.
CSS is Cascading Style Sheet (cascading: from top to bottom). You can only effect the last element in the CSS selector.
The condition you are looking for can be done using JavaScript, but this is outside the scope of your question.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
I have the following HTML
<div id"mainDiv">
<ul id="cat1">
</ul>
</div>
<div id"mainDiv">
<ul id="cat2">
</ul>
</div>
I would like to select the "mainDiv" which has a child ul "cat1", in my CSS as I want to apply some styling on that div. But not the all maindiv's
Any ideas?
Your markup is invalid:
<div id"mainDiv">
should be
<div id="mainDiv">
Since duplicate ID's are invalid in HTML, your question is really invalid in this context.
You should either use a class OR rethink your structure.
Example for the first div:
<div class="mainDiv firstdiv">
and subsequent divs:
<div class="mainDiv">
CSS:
.firstdif{}
put your CSS in that.
No CSS selector for this currently, so you're going to have to resort to some JavaScript/jQuery:
$('#cat2').parent().css(/* add it here */);