Hello i have structure:
<section class="entry">
<div class="1">
<div class="IappearSometimes">text1</div>
<p class="ImAlwaysShowingText">text2</p>
</div>
</section>
I would like to hide by display:none p class .ImAlwaysShowingText element, only when div class .IappearSometimes appears.
By default class .ImAlwaysShowingText is always on screen and i want to hide it when class .IappearSometimes shows on.
I was trying by nth-child, ~ selector, but after 2 days of trying its hiding other elemtns on page, im really lost..
Can I select it somehow?
You can do it through jQuery
if ($('.IappearSometimes.').is(':visible')) {
$('.ImAlwaysShowingText').hide();
}
This will cause when element IAppearSometimes is visible on screen to hide ImAlwaysShowingText
This should work
.IappearSometimes ~ .ImAlwaysShowingText {
display: none;
}
<section class="entry">
<div class="1">
<div class="IappearSometimes">text1</div>
<p class="ImAlwaysShowingText">text2</p>
</div>
</section>
Edit: You can see here DEMO if .IappearSometimes exists .ImAlwaysShowingText will have display: none
I think this is enough (combined selector):
.IappearSometimes.ImAlwaysShowingText {
display: none;
}
EDIT: Sorry, no space in between the classes.
Here's a codepen (with another line added): http://codepen.io/anon/pen/pgybdL
Related
i wanted to know if in css there is a way to inject a display none to the relative of an attribute es;
<div class="classeA">
<div class="classeB" data-userid="1234" >
</div>
</div>
what should i use?
[data-userid="1234"] < .classeA{
display:none !important;
}
what should I do?
I want class classA with display none selecting the data-userid attribute
You could consider using :has(), although as of yet there is no support across any browser.
It would look something like this:
.classeA:has([data-userid="1234"]){
display:none;
}
Demo:
$('.classeA:has([data-userid="1234"])').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classeA">
<div class="classeB" data-userid="1234">
</div>
</div>
I'm trying to find a way to create a "tabber" style navbar while using no scripting whatsoever. However I'm having issues figuring out how to make a default image appear when none of the other spans are the target. I am VERY new to CSS, so in addition to this question any recommendations are appreciated.
More in-depth description, usage, and restrictions can be found below the code.
CSS
/* Hide stage# images on page load */
.infobox .stages .stage1, .stage2, .stage3, .stage4 {
display:none;
}
/* Display Image when anchor link is clicked */
.infobox #thisstage1:target {
display:inline
}
.infobox #thisstage2:target {
display:inline
}
.infobox #thisstage3:target {
display:inline
}
.infobox #thisstage4:target {
display:inline
}
HTML
<table class="infobox">
<tbody>
<tr class="stages">
<!-- Tabber Style Navbar Containing Links -->
<td>
Stage 1
"-"
Stage 2
"-"
Stage 3
"-"
Stage 4
</td>
</tr>
<tr>
<!-- Images to show when corresponding span is targeted via above Links -->
<td>
<span class="stage1" id="thisstage1">
<a href="...stage1.png">
<img src="...stage1.png">
</a>
</span>
<span class="stage2" id="thisstage2">
<a href="...stage2.png">
<img src="...stage2.png">
</a>
</span>
<span class="stage3" id="thisstage3">
<a href="...stage3.png">
<img src="...stage3.png">
</a>
</span>
<span class="stage4" id="thisstage4">
<a href="...stage4.png">
<img src="...stage4.png">
</a>
</span>
</td>
</tr>
</tbody>
</table>
Detailed Description:
I have 4 links (Stage1, Stage2, Stage3, and Stage4). I also have 4 images. When I click on the links, I want the targeted image to be shown and all other images to disappear. The CSS is straightforward in accomplishing this much.
However, when the page is loaded and none of the links are the target, no image is displayed. I would like for Stage1.png to be shown if no other links are the target.
I tried this & a LOT of similar things with different selectors:
.thisstages .stage1 span:nth-last-of-type(4) [display=none] {
display:inline
}
.servantstages span:nth-last-of-type(4) [display=none] .stage1 {
display:inline
}
However, usually, Stage1 was shown directly before The targeted Stage. I'd also like to stay away from specifying attributes, like above, as I've read that it can slow things down. However, I'm new to this, so I don't have many options here. Any and all input is greatly appreciated.
Usage & Restrictions
I'm going to be implementing this on a Wikia specifically to reduce vertical scroll on mobile devices. On top of that, I am limited in what I can do as far as HTML is concerned. The HTML tags usable on Wikia are somewhat restricted, however I don't see this causing an issue. I'm avoiding scripting for 2 reasons. The first being that Wikia requires an approval window, and I have a bad habit of tweaking things. The second is mobile devices.
Other Notes
So it appears that using the method below by Mi-Creativity doesn't function correctly on some phones (Probably due to Wikia's JavaScript). So I played around some more with CSS trying to concentrate on using only display:. After a lot more searching I ran across several different methods of using combinators to achieve what I'm looking for. Here's the results (No guarantee on mobile compatibility, currently untested but hopeful):
CSS
.stages > .stage:target ~ .stage:last-child, .stages> stage {
display:none
}
.stages > :last-child, .stages > .stage:target {
display:block
}
HTML
<div>
Home
Link Text
Link Text
...More Links here if needed...
</div>
<div class="stages">
<div id="link2" class="stage">
...Content...
</div>
<div id="link3" class="stage">
...Content...
</div>
...More divs here if needed...
<div id="home" class="stage">
This is the default content, must be the last div nested in "stages"
</div>
</div>
This is from an answer to a similar one , JS Fiddle
As from a comment, to show the first panel when page load, set a display for only this one - depending on its id or add a unique class - , also giving the .show class an absolute positioning and top value to shift it down JS Fiddle 2
CSS:
.show {
display: none;
position:absolute;
top:38px;
width:calc(100vw - 10px);
height:300px;
}
#alarm {
top:38px;
display:block;
}
.2nd{
z-index: 10;
}
:target {
display:block;
}
HTML:
<div id="dashboard" class="row">
</div>
<div id="alarm" class="row show">
<div class="col-12" style="background-color:#009;height:300px"></div>
</div>
<div id="calendar" class="row show 2nd">
<div class="col-12" style="background-color:#C00;height:300px"></div>
</div>
<div id="weather" class="row show 2nd">
<div class="col-12" style="background-color:#0C0;height:300px"></div>
</div>
I have tried to make a tooltip appear using CSS only. I have a solution; however I need another structure in my HTML, and remove the current use of a wrapper div.
This is my current HTML with a wrapper, that makes the div with class tooltip appear:
<div class="wrapper">
<img src="1.png"></img>
<div class="tooltip">
<span>1. A small tooltip.</span>
</div>
</div>
And the following css is what displays the tooltip:
.wrapper:hover > .tooltip {
display:block;
}
Here is my code describing the problem; http://jsfiddle.net/5p3teu5b/15/.
How do I make the div .tooltip appear without the wrapper div?
You can use another selector than "child of", see the fiddle for an example. If you want the sibling to the image to display when hovering, you can use the + selector, described at W3 Selectors.
so your HTML will look like this, notice the extra class on the img tag.
<div>
<img class="sibling" src="1.png"></img>
<div class="tooltip">
<span>Lorem Ipsum</span>
</div>
</div>
with the following css
.sibling:hover + .tooltip {
display:block;
}
.tooltip{
display: none;
}
This will make the div with class tooltip appear when you hover an image with class sibling, but only if it appears directly after it. If you want all siblings with the class .tooltip to appear when hovering any image, you can use img:hover + .tooltip as a selector instead.
what I want is that div with id makeMeWork to be visible only when div with id clickMe is clicked.
the fiddle link.
html:
<div class="showhim">Press ME<div class="showme">Working</div></div>
<div class="showme" id='makeMeWork'>Not Working</div> <div class="showhim" id='clickMe'>Press ME</div>
css:
.showme{
display: none;
background-color:red;
width:200px;
height:50px;
}
.showhim:active .showme{
display : block;
background-color:green;
}
I want this done purely through css as js and HTML part can no longer be modified.
I guess the major problem now is, there is no way to select previous child in css,
similar questions : is-there-a-previous-sibling-selector and show-div-on-hover-with-only-css
do something like this
demo - http://jsfiddle.net/tbnsoc3y/
wrapping your content in div for eg like i have done
<div class="cont">
<div class="showme" id='makeMeWork'>Not Working</div>
<div class="showhim" id='clickMe'>Press ME</div>
</div>
Right Now There is No previous selection of sibling available but it will be soon in css4 which has been drafted in w3c and they are working on it , ill tell use jquery or css hack !
Read the article
This code doesn't apply the width of my div
.column-hide {
width: 16.666666666666664%!important;
}
.column-hide * {
display: none;
}
While this works
.column-hide * {
display: none;
}
.column-hide {
width: 16.666666666666664%!important;
}
Any advice?
UPDATE: HTML CODE
<div class="col-md-6 column-hide">
<div class="header-label bg-gray custom-attr-header">
</div>
<div class="fields-body">
<h4 class="pull-left">Texts</h4>
</div>
</div>
An Asterisk (*) is the universal selector for CSS. It matches a single element of any type. So I;ll not suggest to avoid this universal selector. I felt many time if you define same property the last one applied always.
Here is the Working Example.
here is the HTML code and CSS. The last one property will apply to element.
p{color:red;}
p{color:green;} /*will take me as I am defined at last*/
<p>I'll be RED</p>
<p>I'll be GREEN</p>
As you can see the color:green applied at last so <p> element color will be green. same theory will apply in your case as well.
* {
display:none
}
will shows no element of html as * means all element.By using current posted code nothing is showing up. In order to display the content need to remove the above property