I have a <div> classed as class="tooltip" which is normally hidden with display:none.
I would like the <div> to show with display:block when an area of my image-map is clicked. I am planning on using the :target pseudo-class.
Here is the simplified version of my code :
<img id="slot" class="single" src="slot.png" usemap="#slot"/>
<map name="slot">
<area
shape="poly"
coords="30,0,61,15,31,31,0,16"
alt="Slot"
href="#trigger-happy">
</map>
<div class="fixed-container">
<div class="tooltip">
Slot
</div>
</div>
As you can see, the trick is that the href is hidden away within the <area> tag. From what I understand, it is currently impossible to select a parent with pure CSS.
Would you have any suggestions on how to perform this task ? I'm not familiar with JavaScript, so a pure CSS answer would be ideal. I know I'll have to get down to JS eventually however, so a JS fix would also be acceptable if there is no other way.
It should be noted that I can already achieve similar results with the :hover pseudo-class, by applying it to the map tag. When using map:hover, the browser reacts perfectly. However, for actual clicking rather than hovering, I'm not sure I can just use <a> with <map>, it doesn't seem to work.
You are targeting #trigger-happy via href, therefore you would add id="trigger-happy" to the element .tooltip.
Here is a working example.
Updated HTML:
<div class="fixed-container">
<div id="trigger-happy" class="tooltip">
...
</div>
</div>
Use the :target pseudo class to style the targeted element, #trigger-happy.
The base CSS would look like this:
#trigger-happy {
display:none;
}
#trigger-happy:target {
display:block;
}
The downside to the :target approach is that once something is clicked, it is clicked. There isn't any toggling available with this option. I imagine you could use the checkbox hack if you wanted it to be toggleable, otherwise JS would be needed.
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
I think this is very unlikely but is there any way in CSS to achieve moving elements in the DOM? Like moving jt-menu-item-price into the jt-header in the following?
<div class='jt-row'>
<div class='jt-header'>this is what I need done</div><div class='jt-menu-item-price'>37.23</div>
</div>
<div class='jt-row'>
<div class='jt-header'>this is what I need done<div class='jt-menu-item-price'>37.23</div></div>
</div>
Not using CSS, no. You can manipulate the DOM using JavaScript, but not with CSS. You could 'visually' move it with CSS, but that wouldn't affect the DOM structure, just how it is presented.
You have to use Javascript to manipulate the DOM. CSS never affects the DOM, just let you style it.
I've got this structure:
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
Now, I want that on click to #hide:target, div#d2 disappear.
Can I do this with CSS?
You can do this with CSS!
If you change your HTML markup a little bit you can achieve this by using CSS :target
#d2:target {
display: none;
}
<div id="d1">
Text
<div id="d2">Word
My other text
</div>
You can do this with CSS but you need to use javascript to change the CSS (style) of the element.
This solution requires no plug ins (such as jQuery).
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
If you would like it to be completely functionless.
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
You should probably use javascript or jQuery to accomplish this.
$('#object').click(function(){
$('#tohide').hide();
});
To make it specific for this (local scope)
if($('#d2 a').attr('href')=='#hide'){
$('#d2 a').click(function(){
$('#d2').hide();
});
}
But that isn't the proper way to do it. Use classes.
You can do this with jQuery simply:
$(document).ready(function(){
$("a").click(function(){
$("#d2").hide();
});
});
I strongly believe that CSS is for style, and Javascript is for function (and HTML is for markup).
I have made the mistake of using :target and building functionality with CSS where it shouldn't be, and trust me, you are going to make a nightmare for yourself with these bad habits down the road. jQuery is going to be your best friend in situations like this. It works on ALL browsers (that support javascript) and you won't have your functionality breaking down in edge-cases and your users pissed off. Do what Jack says and use some simple jQuery. you can also use .addClass and .removeClass to change the css in other ways than just hide/show.
With css I think it isn't possible, but you could use this code that I am letting here, it is based in javascript, that can be really usefull in this situations. I am not so good at explaining but for these type of questions I recomend learning Javascript.
<div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>
This is your HTML file for now, I created a DOM event, when you click the , a function called hide() will run in our js file. TIP: Don't forget to link the html with de javascript file. You can do that with:
<script src="yourfilegoeshere"><script>
Now let's head in the css:
#d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}
Based with this css both of them are visible. Now let's go to our Js file:
function hide() {
var d2 = document.getElementById('d2')
d2.style.opacity = '0'
}
Now if you click in your a the d2 will not be visible
I hope I helped!
I am trying to define styling for second sibling's child element based of first sibling's class.
Here is an example of what I am trying to achieve
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?
Help much appreciated.
Thanks,
Medha
As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:
HTML
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
CSS
.one.edit + .two .change { color: green; }
If not, you could easily accomplish what you're after with a little JavaScript.
Here You can find answer:
Complex CSS selector for parent of active child
Short answer copied from link:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that
satisfies certain criteria. A more advanced selector scheme (such as
XPath) would enable more sophisticated stylesheets. However, the major
reasons for the CSS Working Group rejecting proposals for parent
selectors are related to browser performance and incremental rendering
issues.
Update:
Now I notice the edit class required in the child. You cannot.
simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.
More here:
CSS selector for "foo that contains bar"?
.
Original:
Depending on which browsers you care about, this may work:
div.one + div.two > div.change {
color: green;
}
Reference:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live Example:
http://jsfiddle.net/Meligy/NVjq6/
i want to add a style (display:none) to hide a div element with the class "xclass" but only if it contains a link with the href "/somedir/somepage.php" is this doable with CSS or CSS3 selectors?
below is some example code for the div i wish to hide, it could appear anywhere inside a web page.
<div class="xclass">
<div>
<div>
<a href="/somedir/somepage.php">
</div>
</div>
</div>
No, this isn't possible. Due to the way browsers handle CSS selectors, you cannot select a parent element based on its children.
This might be doable with JavaScript. Here's a jQuery snippet:
$('.xclass').each(function() {
if ($(this).has('a[href="/somedir/somepage.php"]')) {
$(this).hide();
}
});