<p class="entry-meta"><time class="entry-time" itemprop="datePublished" datetime="2017-06-03T02:58:22+00:00">June 3, 2017</time> by <span class="entry-author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="entry-author-name" itemprop="name">Albert</span></span> <span class="entry-comments-link">Leave a Comment</span> </p>
Above html will output
June 3, 2017 by Albert Leave a Comment
But I want to hide by Albert. The problem is I can't hide byas it's not wrapped within any html tag.
visibility can be overwritten on children elements. So we can customize just the root text node:
p.entry-meta{ visibility: hidden; }
p.entry-meta time, p.entry-meta span.entry-comments-link { visibility:visible; }
The problem is that visibility still occupies space:
p.entry-meta{ visibility: hidden; }
p.entry-meta time, p.entry-meta span.entry-comments-link { visibility:visible; }
<p class="entry-meta">
<time class="entry-time" itemprop="datePublished" datetime="2017-06-03T02:58:22+00:00">June 3, 2017</time> by <span class="entry-author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="entry-author-name" itemprop="name">Albert</span>
</span>
<span class="entry-comments-link">Leave a Comment</span> </p>
var el = document.querySelector(".entry-time").innerText;
document.querySelector(".entry-meta").innerText=el;
See
You can do this with JavaScript - select the paragraph DOM element and assign it to a variable, then remove the child nodes one at a time:
var entryMetas = document.getElementsByClassName("entry-meta");
for (var i = 0; i < entryMetas.length; i++){
entryMetas[i].removeChild(entryMetas[i].childNodes[2]);
entryMetas[i].removeChild(entryMetas[i].childNodes[1]);
}
If you're confined to CSS only, you can use Dorival's answer, but add an additional CSS rule to reduce the white space:
p.entry-meta span.entry-author-name{ display: inline-block; width: 0px; }
Use the following CSS to remove the text:
.entry-author-name { display: none; }
p { font-size:0; }
p > * {
font-size: 12px;
}
<p class="entry-meta">
<time class="entry-time" itemprop="datePublished" datetime="2017-06-03T02:58:22+00:00">June 3, 2017</time> by <span class="entry-author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="entry-author-name" itemprop="name">Albert</span>
</span>
<span class="entry-comments-link">Leave a Comment</span> </p>
Related
I have a sequence of span elements. I need for them to display inline until an element is reach that should "wrap". The elements that follow the "wrapped" element should continue displaying inline from there. To put it another way, I want an element to display as if it was set to block with regard to the content that precedes it, but display as if it was inline with regard to the content that follows it. Consistent with performing a cr/lf.
The solution must be based on styles only. It is preferable that the only styling change be made to the "startWord" style in the sample code.
The sample below is what I currently have. Word 1, Word 2, and Word 3 should display inline, as they do. Word 4 should display down the page below Word1, as it does. Word 5 and Word 6 display down the page from Word4 due to Word4 display being set to block, but I want them to display immediately following Word4 as if Word4 display was inline or inline-block.
Any assistance would be appreciated.
<style>
.word {
border:1px solid steelblue;
}
.startWord {
border:1px solid red;
display:block; // I want something else here that allows content to display inline after it.
}
</style>
<div>
<span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
</div>
If you're able to edit the html, add a <br/> before <span class="startWord">.
If not, you can add a line break as a CSS psuedo element (as per https://stackoverflow.com/a/17048164/573718), for example before every span.startWord:
<style>
.word {
border: 1px solid steelblue;
}
.startWord {
background: red;
}
.startWord:before {
content: '\A';
white-space: pre;
}
</style>
<div>
<span class="word">Word 1</span>
<span class="word">Word 2</span>
<span class="word">Word 3</span>
<span class="word startWord">Word 4</span>
<span class="word">Word 5</span>
<span class="word">Word 6</span>
</div>
You could do that using float and clear, as I did below:
.word {
float: left;
}
.startWord{
border: 1px solid red;
float: left;
clear: left;
}
.startWord + .word {
/* here any styles for the element which follows the wrapped element could go*/
}
<div>
<span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
</div>
If needed, you can add width: 100% to .startWord to make it full width like a block.
With the following HTML:
<div>
<span class="something">...</span>
<span class="something">...</span>
<span class="something">...</span>
</div>
<article>
<span class="something">...</span>
</article>
I want to find the first .something. How would I do this?
You can't achieve this with only CSS. However, JavaScript's document.querySelector can be used to obtain the first element on the page matching a selector.
const first = document.querySelector('.something');
first.style.backgroundColor = "dodgerblue";
<div>
<span class="something">...</span>
<span class="something">...</span>
<span class="something">...</span>
</div>
<article>
<span class="something">...</span>
</article>
In order to affect pseudo elements, you can add a class to the element found with document.querySelector and add another style declaration in your CSS.
const first = document.querySelector('.something');
first.classList.add("first");
.something.first:after {
content: "I'm the first one!";
color: dodgerblue;
}
<div>
<span class="something">...</span>
<span class="something">...</span>
<span class="something">...</span>
</div>
<article>
<span class="something">...</span>
</article>
It's not possible to achieve this purely with CSS. It would have been possible if all the elements with the .something class would have had the same parent (see this solution). But since they are spread over multiple parents this won't work.
You can use jQuery for this which has a :first selector:
$( ".something:first" ).css( "color", "red" );
div, article {
padding: 1em;
border: 1px solid silver;
margin-bottom: 1em;
width: 100px;
}
span { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span class="something">Something</span>
<span class="something">Something</span>
<span class="something">Something</span>
</div>
<article>
<span class="something">Something</span>
</article>
Have this code:
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4> </div> </div>
How do I hide the text "(Fee Simple)" from displaying?
Want the Price to show but not the "Fee Simple" text
You can use a font-size trick like this:
h4.ihf-price {
font-size: 0;
}
h4.ihf-price span {
font-size: initial;
}
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>
Or use color trick if you want to maintain the same content width of h4:
h4.ihf-price {
color: #fff; /* Should be the same as background */
}
h4.ihf-price span {
color: initial;
}
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>
Hide text in the entire element. Show text only in the nested element.
.ihf-price {
font-size: 0;
}
.ihf-for-sale-price {
font-size: 16px;
}
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>
OR
.ihf-price {
visibility: hidden;
}
.ihf-for-sale-price {
visibility: visible;
}
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>
<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>
Working in WooCommerce I want to hide "as low as" which is contained in an outer span yet show the price which is contained within an inner span.
If someone could guide me as to how to do this.
Thanks
You can modify the font-size value to hide all text and then show the inner span text this way:
.price {
font-size: 0;
}
.price span {
font-size: 18px;
}
<span class="price">
as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
You can use visibility: hidden; on your outer <span>, and visibility: visible; on your inner <span>
.price {
visibility: hidden;
}
.woocommerce-Price-amount {
visibility: visible;
}
<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>
Visibility can help you here.
.price {
visibility: hidden;
}
.price > span {
visibility: visible;
}
<span class="price">as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>
If removing the space taken by the hidden text is also require then the font-size:0 is an option in some browsers provided you reset the inner text back to the required size.
.price {
visibility:hidden;
font-size:0;
}
.price > span {
visibility:visible;
font-size:1rem;
}
<span class="price">as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>
Do the proper thing, and make your HTML reflect your intentions. If you want to be able to only style "as low as", then wrap that text in it's own <span> and hide that instead. This will be much cleaner than trying to select a text node with CSS and suffering from the CSS effecting the siblings also.
.hidden {
display: none;
}
<span class="price">
<span class="hidden">as low as</span>
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
The best solution is to change the HTML, as in 4castle's answer.
However, if for whatever reason you cannot change the HTML structure, but you can change the text content and the CSS, and also have a way to set the class on an object as needed (I used a hacky little piece of JS to toggle, but it could also be set during generation of a static page), you can use the ::before pseudoelement to display the desired text:
function handleClick(what) {
what.classList.contains('asLowAs') ? what.classList.remove('asLowAs') : what.classList.add('asLowAs');
}
.asLowAs::before {
content: "as low as ";
}
<span class="price asLowAs" onclick="handleClick(this)">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.