I was wondering how I can remove display:none from all child spans
<span class="tooltip">
<span>Content goes here along with other spans</span>
</span>
.tooltip span {
display:none;
}
What I need is for the span inside of the tooltip span not to take the display none effect, I understand that I could a div for one of them instead but how I have the tooltips setup and how it works within wordpress I need to use all spans. Thanks
you most remove the 'tooltip' class
from Child spans ancestor
you can do it with JQuery
$('.tooltip').removeClass('tooltip')
Related
I have an span that contains a p-tag and text. Now I want to add an underline effect on hover. But I only want to underline the Text, in this case 'Tree', but not the 'Test'. Unfortunately I can not add anything to the 'tree'. I can not remove the underlining in the p-tag with text-decoration: none.
<span id="underline">
<p id="noUnderline">Test</p>
Tree
</span>
Any ideas?
It's not possible.
Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
I'd suggest put a span around "Tree" and add the effect to that.
If that's not possible, you could add the effect to the span and remove it from the p-tag. But i'd rather have no effect than doing that ;)
Edit: I was more enthusiastic, ignore the second idea.
For this very specific case, and if it is truly not possible to add a span around the text node or to alter the styling of the p element, then you can get the effect with a bottom border - but it's only for specific cases:
<style>
#underline {
border-style: none none solid none;
}
</style>
<span id="underline">
<p id="noUnderline">Test</p>
Tree
</span>
I have a problem in that I'm trying to show an <aside> text inline when a mouse is hovering over a defined keyword. The way I planned to do this to utilize the <span>, which wraps the <aside> and then I could use CSS selectors like #main > article > .inline-aside, aside { display: none; } to choose the descendant <aside> elements within these special purpose regions.
I seem to be able to hide the contents, but not to get them back. The problem might be, I'm a total CSS rookie, the display: none somehow removes the element. Is there a way to accomplish this using CSS alone?
Here are the relevant pieces and I have a fuller Fiddle at https://jsfiddle.net/Veksi/z0d5j1xb/.
<article id="faq-section-general" class="tab-content">
<h1>General</h1>
<p>The four Byzantine <span class="inline-aside">generals.<aside>General inline aside.</aside></span></p>
<p>Some more general text.</p>
</article>
The thing is that you can't use <aside> inside of a <p>. The <aside> would then be moved outside of the <p> which changes your DOM what makes it impossible to select the <aside> on hover of the .inline-aside as you can't go back in the DOM.
However, if you change your <p> for example to a <div> the correct selector logic would look like the following:
/* By default, hide aside blocks that have .inline-aside elements as parents. */
#main > article .inline-aside aside {
display: none;
}
/* Show the aside elements inside .inline-aside elements when they're hovered. */
#main > article .inline-aside:hover aside {
display: inline; /* or block */
}
Updated JSFiddle.
try (for you code example)
tab-content > p > span.inline-aside:hover + aside{
display:block/*or anything else*/
}
EDIT
You can also use transition to make things smoother, like this :
tab-content > p > span.inline-aside:hover + aside{
display:block;
transition: all 0.5s ease-in-out;
}
If the <aside> element is not critical for you, you could consider using an inline element as pop-up text.
I modified your code to use another <span> inside the .inline-aside element. Check it out here: https://jsfiddle.net/z0d5j1xb/3/
Hope that's what you needed.
Also, a general recommendation - avoid using deep nesting in CSS like #main > article > .inline-aside.
you have three issues
1
the span is inline element but aside is a block element
you can't put a block element inside inline element
the issue is that when you do so the browser render the block element outside the inline element
you can turn span to div
2
your selector > mean a direct child not a descendant so you must include the p element in your selector #main > article > p > .inline-aside or just use the space selector #main .inline-aside
3
is that you can't hover an element with display: none; you should use visibility: hidden;
here is a solution but you can still do better
We can use javascript/jquery for hiding or displaying data on hover event check out the following code,, In the snippet when u hover on the generals word it will show the content
$(document).ready(function(){
$( ".inline-aside" ).hover(
function() {
$('aside').css( 'display','initial')},function(){$('aside').css('display','none')} );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<body>
<article id="faq-section-general" class="tab-content">
<h1>General</h1>
<p>The four Byzantine <span class="inline-aside">generals.<aside class="a" style="display:none">General inline aside.</aside></span></p>
<p>Some more general text.</p>
</article>
</body>
Both of the following codes seem to work properly to style the span element:
<style>
div p span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
<style>
div span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
But I'm not sure if the second one is the right coding and if there's a difference between them, for example regarding browser support.
Neither of them is a “subchild selector”; there is no such concept in CSS. They are different descendant selectors, or descendant combinators as they are called in the Selectors Level 3 specification. Their meanings are different, so it depends on the purpose which one is better.
The selector div span matches any span element that is a descendant of a div element. The selector div p span matches any span element that is a descendant of a p element that is a descendant of a div element. Both selectors are rather theoretical as such; they are hardly useful in practical situations without some additional components such as class selectors.
They both work because the elements selected by div p span are a subset of the ones selected by div span.
If you include a <span> as a child of the <div>, the second one will select it, but the first one will not. If you don't include a <span> as a child of the <div>, they will select exactly the same elements.
For example:
<div>
<span>Only the second selector will make this text red</span>
<p>
<span>Hello, world!</span>
</p>
</div>
Well, it really depends on the context. For example, this selector...
div p span
will only apply to all span elements that are children of a p element which in turn, are children of a div element. Consider, this html...
<div>
<span class="title">Title</span>
<span class="desc">Description</span>
<p>
<span>Content</span>
<p>
</div>
the following css declaration will color the content span in blue
div p span
{
color:Blue;
}
however the style is not applied to the title and the description because they are not children of a p element. Now by using this css declaration...
div span
{
color:Blue;
}
will cause both the title, description and the content to be coloured in blue because this selector targets all span elements that are nested within a div element
As for performance, that's hard to determine because it all depends on implementation and how well different browsers traverse through a DOM hierarchy and apply the style. But, I'd guess that the more specific you can be the better so that the HTML parser can target elements directly. With that in mind, this css selector...
div p span
should perform faster than
div span
because it will cause the rendering engine to look for all div element, then p elements ignoring all other elements (including span elements that are direct children) and finally it'll look for span elements
both of them will work but
div p span {
font: 18px arial;
color: red;
}
is more correct, and you are less likely to have problems like when you decide to add a span in an li for some other possible purpose.
div > p > span {
font: 18px arial;
color: red;
}
First method is correct way.The styles work only span that inside of the p tag and you can give/edit/change specific styles on this item ...but the second method's style work all span inside of div tag..
I have the following HTML.
<th id="form:dataTable:discountStartDate">
<span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
<span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
</th>
I need to hide the given CSS class - ui-sortable-column-icon from the last <span> only.
If I do the following,
<style type="text/css">
#form\:dataTable\:discountStartDate .ui-sortable-column-icon{
display : none;
}
</style>
then, it will hide that class from both the span tags.
The first span tag is written by me. Therefore, it can be manipulated. It can be given an id attribute, if necessary but the other span tag is generated by a framework that I cannot tough.
Is there a way to hide the CSS class as specified from the last span tag only?
It would be even better, if all the classes from that last span tag are overridden.
If you want to dynamically remove the class from the last span element, here is some jQuery:
$('#form\\:dataTable\\:discountStartDate > span:last').removeClass('ui-sortable-column-icon');
jsFiddle example
If you want to remove the class from all the span elements:
$('#form\\:dataTable\\:discountStartDate > span').removeClass('ui-sortable-column-icon');
jsFiddle example
Based on your update, it seems as though you want something like this though.
#form\:dataTable\:discountStartDate span.ui-sortable-column-icon:not(:last-child) {
/* style */
}
Using the :not selector, you can exclude styling from the last span element.
jsFiddle example
You can use CSS to select the last element, or every other element depending on your needs.
#form span:last-child {
display: none;
}
I have noticed that if an element, such as span or p, has a display of inline-block then it will cover the underline style of an anchor when placed inside.
<span style="display:inline-block">test</span>
<p style="display:inline-block">test</p>
Is there a way to prevent this?
add to the style tag text-decoration:inherit;
1) Move the style to the A-tag
test
or
2) Add underline to the child element
<p style="display:inline-block;text-decoration:underline">test</p>
Add following style:
a *:hover { text-decoration: underline }
DEMO