I want to hide a div when it belongs to a parent div which has the attribute data-ontarget set to true.
I tried the following, but nothing happens.
If I remove the class name after the attribute selector in the example below, the whole parent div becomes hidden. So the attribute selector works, but not in combination with the search for a child class.
Here is what I tried:
HTML:
<div class="myClass" data-ontarget="false">
<img src="myImage1.png"/>
<div class="myImage">This is my image 1</div>
</div>
<div class="myClass" data-ontarget="true">
<img src="myImage2.png"/>
<div class="myImage">This is my image 2</div>
</div>
CSS:
[data-ontarget="true"] .myImage{
display: none;
}
Replace opacity property with display to hide the element.
.input_container[data="true"] .awsome_input_border{
opacity: .5;
}
.input_container[data="false"] .awsome_input_border{
opacity: 1;
}
<div class="input_container" data="true">
<span class="awsome_input_border"/>
hide me!!
</div>
<div class="input_container" data="false">
<span class="awsome_input_border"/>
hide me!!
</div>
I think you are missing the proper CSS, which makes your target div as hidden.
Refer to the demo here.
Please find the code below:
HTML:
<div class="parent">
<div class="myClass" data-ontarget="false">
<img src="myImage1.png" />
<div class="myImage">This is my image 1</div>
</div>
<div class="myClass" data-ontarget="true">
<img src="myImage2.png" />
<div class="myImage">This is my image 2</div>
</div>
</div>
CSS:
.parent > div[data-ontarget="true"] {
display: none;
}
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 months ago.
I want to select a div that contains another div with specific class or specific attribute value. I have tried these: (but it selects the child not the parent/container)
div div[data-value="hi"]
div>div[data-value="hi"]
div div.any
div>div.any
(example) the one with attribute value:
<div>
<div data-value="hi">example</div>
</div>
(example) or the one below with class:
<div>
<div class="any">example</div>
</div>
Please do not suggest nth-child as their will be couple of div and div position is random as the below example:
<div>
<div class="other">example</div>
</div>
<div>
<div class="any">example</div>
</div>
<div>
<div class="other">example</div>
</div>
<div>
<div class="other">example</div>
</div>
Please let me know if it even possible with only CSS, Thank you for your help.
If I've understood correctly and you want to target the PARENT should it contain a child with a given class or attribute, then you want the :has pseudo-selector. Note, that it isn't available in all browsers/versions yet but has good availability see: Can I Use :has selector
div {
height: 50px;
width: 100%;
}
div:has(div.other) {
background: red;
}
div:has(div[data-value="hi"]) {
background: orange;
}
<div>
<div class="other">example</div>
</div>
<div>
<div class="any">example</div>
</div>
<div>
<div class="other">example</div>
</div>
<div>
<div data-value="hi">example</div>
</div>
just directly select its class or data-value
div > .any {
background: red;
}
div > [data-value="other"] {
background: blue;
}
<div>
<div data-value="other">example</div>
</div>
<div>
<div class="any">example</div>
</div>
<div>
<div class="other">example</div>
</div>
<div>
<div class="other">example</div>
</div>
In this JSFiddle, how can I style all <a> elements except the first grandchild? (abc) with a single selector? I want to avoid using two rules at all costs.
#outer a:not(:first-child){
color: red;
}
<div id="outer">
<div id="firstParent">
<a>abc</a>
<a>def</a>
<a>hij</a>
</div>
<div id="secondParent">
<a>klm</a>
<a>opq</a>
</div>
</div>
You can do this (not sure if you can avoid more than 1 selector)
#outer >div:first-child a:not(:first-child),
#outer >div:not(:first-child) a{
color: red;
border:1px solid;
}
<div id="outer">
<div id="firstParent">
<a>abc</a>
<a>def</a>
<a>hij</a>
</div>
<div id="secondParent">
<a>klm</a>
<a>opq</a>
</div>
</div>
One rule 2 selectors:
a ~ a The general sibling combinator covers any <a> that follows another <a>. This basically selects all but the first <a> of sibling <a>.
div:nth-of-type(n+2) a This targets all <a> inside the second div and any preceding sibling divs in the future🟊.
Demo
a~a,
div:nth-of-type(n+2) a {
color: red
}
<div id="outer">
<div id="firstParent">
<a>abc</a>
<a>def</a>
<a>hij</a>
</div>
<div id="secondParent">
<a>klm</a>
<a>opq</a>
</div>
</div>
🟊 Props to Temani Afif for suggesting (n+2).
This works, not exactly sure why!
#outer :not(:first-child) {
color: red;
}
<div id="outer">
<div id="firstParent">
<a>abc</a>
<a>def</a>
<a>hij</a>
</div>
<div id="secondParent">
<a>klm</a>
<a>opq</a>
</div>
</div>
I have a div tag used for a banner so I'm setting it's content to be an image. However, I would like to display some text and glyphicons inside of that div. I'm was trying to use a Bootstrap Grid to lay it out but I can't get anything to display inside the div. I've tried just putting in some simple text without any luck.
What is the proper way to do something like that?
This is what I've tried. The image shows up but none of the text.
div.banner {
content: url('../Images/banner.jpg');
background-color: #A5B7C7;
}
<div class="banner">
<div class="row">
<div class="col-md-6"> something goes here</div>
<div class="col-md-6"> something else</div>
</div>
</div>
The content property will replace the content of the element. Instead - you can use the :before pseudo-class (or switch from content to background-iamge):
div.banner {
background-color: #A5B7C7;
}
div.banner:before {
content: url('https://dummyimage.com/150x100/263cb5/ffffff');
}
<div class="banner">
<div class="row">
<div class="col-md-6"> something goes here</div>
<div class="col-md-6"> something else</div>
</div>
</div>
Use background-image insted of content
Instead of the css property content, use the property background like:
div.banner {
background: url('../Images/banner.jpg');
}
content will not allow text to be placed over it by default. You would have to add more css. Please change content to background-image
.banner {
background-image: url('../Images/banner.jpg');
background-color: #A5B7C7;
}
<div class="banner">
<div class="row">
<div class="col-md-6"> something goes here</div>
<div class="col-md-6"> something else</div>
</div>
</div>
There is a code block like this;
<div class="wrapper">
<div class="title">Title Text</div>
<div class="content">
<div class="block">Block text1</div>
<div class="block">Block text2</div>
</div><!--Content End-->
</div>
I change css overflow attr of content class like "overflow:scroll;" . But when I change this feature, overflow attribute of all div element changing. I want to fixed title class ,that don't scroll. How can I do this?
Try with:
div.content { overflow: auto;}
make sure your css is
div.content { overflow:scroll; }
I have a site that has the following basic structure. This site should have a background that is white, with an image that apears once, but instead it just inherits the colour from the html{ } declaration in CSS. All elements below the element that should have the background are transparent, and even though the background is being added (checked in Firebug), it seems that this is below the background defined in html{ }.
This has only happened since I removed the declaration overflow: none; from #content-container, where as before that it worked. I need to remove this however, as changes that are occuring to the site require the nav menu to have dropdowns, so the container below has to allow overflow.
Is there a specific CSS reason why this is happening? Or anything else I need to provide for someone to be able to help? Thanks.
<div id="main-container">
<div id="header-container">
<div id="header-top">
{Code}
</div>
<div id="header-middle">
{Code}
</div>
<div id="header-nav">
{Code}
</div>
</div>
<div id="content-container">
<div id="content-left" class="index">
{Code}
</div>
<div id="content-right">
{Code}
</div>
</div>
<div id="footer-container">
{Code}
</div>
</div>
I'm guessing that #content-left and #content-right elements are floated? In which case the overflow: none on the #content-container was causing the element to self-clear. Without this, the element will not have a height because all the elements within it are floated, and therefore the containers' height cannot be calculated.
If you must use overflow: visible, the workaround is to place a div at the end of the containing element with clear: both set on it:
<div id="content-container">
<div id="content-left" class="index">
{Code}
</div>
<div id="content-right">
{Code}
</div>
<div class="clear"></div>
</div>
.clear { clear: both; }