A particular web editor only allows in-line css and no javascript.
I would like to make a minimal show/hide section:
<div>
<p id="question">What do you call a fish with no eyes</p>
<p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>
Is there any solution? - I.E. compatible.
In short, no.
While it's entirely possible to achieve such a system (for multiple questions and answers) without any JavaScript whatsoever, it's not possible to do it purely inline. This is because you can't target pseudo-elements inline.
And even with you current HTML structure this would still be impossible, as there is no child selector in CSS (though a :has() pseudo-selector has been drafted).
In addition to this, it's also worth noting that inline CSS has a higher level of specificity than stylesheets; a stylesheet rule cannot override inline CSS unless you make use of an !important declaration.
Assuming you are change your HTML, this can be achieved with a combination of the :focus pseudo-selector, the adjacent sibling combinator (+) and the !important declaration, as can be seen in the following:
#question:focus + #answer {
visibility: visible !important;
}
<div>
<a id="question" href="#">What do you call a fish with no eyes</a>
<p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>
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;
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
Using only CSS, is it possible to hide a parent element if a child element does not have a class?
<!-- hide this -->
<div class="parent">
<p class="badChild" />
</div>
<!-- do not hide this -->
<div class="parent">
<p class="goodChild" />
</div>
Unfortunately, I cannot change the markup of the page. I can only add CSS rules.
No, it is impossible to address parent from children with CSS. You should use JavaScript to do so, for example with jQuery .parent() method.
Well you code was wrong <p class="badChild"/> is wrong because <p> is a block element and ends like this <p class="badChild"></p> i have updated the question and coming to your problem there is no method to do this with css only because css allows you to select child, first child, sibling but not the parent element so javascript or jquery is the only option.
If there was a way to do it, it would be in either of the current CSS selectors specs:
Selectors Level 3 Spec
CSS 2.1 Selectors Spec
The Selectors Level 4 Working Draft includes a :has() pseudo-class that works the same as the jQuery implementation. As of 2015, this is not available in any browser.
Using :has() the original question could be solved with this:
li:has(> a.active) { /* styles to apply to the li tag */ }
In the meantime, you'll have to resort to JavaScript if you need to select a parent element.
$(document).ready(function(){
$('.badChild').parent('.parent').hide();
});
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.
In class we are teached to avoid creating ID's in your HTML so you can use them to identify that element in your CSS file. Instead we must use selector specifity as much as possible.
Take for example this simple HTML:
<body>
<div>
<div>
<div>
The div you want to style.
</div>
</div>
</div>
</body>
Is it better to use this:
body > div > div > div{
color: blue;
}
or give the element an id (let's take 'middle') and use this:
#middle{
color: blue;
}
What are the differences (if any at all) performance and usability wise?
The difference in speed between IDs and Classes in modern browsers is so negligible in real world situations it is really not an issue. Therefore current main-line thinking is to use classes where extra clarity and specifity is needed. This way you avoid specifity wars and balances maintainability with code purity.
<body>
<div>
<div class="more-specific-if-needed">
<div class="middle">
The div you want to style.
</div>
</div>
</div>
</body>
.make-more-specific-if-needed .middle {
/* cool styles */
}
Or even use chained selectors to gain extra specifity. You could then split styles in to separate structure based build styles and appearance based theme styles.
<body>
<div>
<div>
<div class="semantic-role theme">
The div you want to style.
</div>
</div>
</div>
</body>
.semantic-role.theme {
/* cool styles */
}
For further reading:
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
Why do browsers match CSS selectors from right to left?
Performance wise it's fastest to get an element by its id than it is to traverse the dom.
From a usability point of view I would be careful using too many id's since they can be only used once for an element.
So it's a question of what you think is more important and how many items we are talking about. Is the speed gain worth the losing of re-usability
Much better to use ID. Performance difference is minimal, and not the important point. I think code readability / maintainability is more important.
One advantage of using ID, is that you could move your element to a different part of the page, and it would retain it's style rules - without counting the containing elements.
I have following markup:
<div class="breadcrumbs">
<span id="links">
home
<span>></span>
users
</span>
</div>
My styles are defined like this:
.breadcrumbs{/*styles for breadcrumbs div*/}
.breadcrumbs span a{cursor:default/*other styles for breadcrumbs links*/}
a.pointer{cursor:pointer;}
On my page, the links show default cursor (arrow) and the style a.pointer is shown striked in IE10 console and firebug.
My confusion is that as pointer class is applied directly to anchor element, should not it override the one picked from .breadcrumbs span a match?
No, of course it shouldn't. The rule of specificity says that more specific the selector, the more precedence it will have. So in your case when you created a class that applies to all the anchor tags, and then another class which applies to anchor tags within a certain other html tag (div), then the second one will have a higher precedence because it's narrower in its targeting.
You could check out this great article from Smashing magazine to understand the rules of specifity. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/