This question already has answers here:
Hide text node in element, but not children
(6 answers)
Closed 4 years ago.
I have HTML code here down below and there is text which does not have any HTML surrounding. Is there any method to hide the text "Enter" which is after "p" tag?
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> </p>
Enter <-- i want to hide this text
<div class="subhead"></div>
</div>
It is not possible to wrap it with a div or any other tag, so I need some different decision like JavaScript or some CSS?
I would consider a CSS hack with font-size:
.entry {
font-size:0;
}
.entry * {
font-size:initial;
}
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>
Another idea with visibility:
.entry {
visibility:hidden;
}
.entry * {
visibility:visible;
}
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>
Do you think it will works
var ele =document.getElementsByClassName('entry')[0]
ele.removeChild(ele.lastChild)
Sorry for late response but this is how you can do it with jquery. Just get all the content of a div, filter the content with no tags around and wrap them inside span with style property as display:none. This will hide that text for you.
$(".entry")
.contents()
.filter(function () {
return this.nodeType === 3 && this.nodeValue.trim() !== "";
}).wrap("<span style='display:none' ></span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> </p>
Enter <!-- i want to hide this text-->
<div class="subhead"></div>
</div>
Thanks
Related
This question already has answers here:
Hide text node in element, but not children
(6 answers)
Closed 4 years ago.
I have HTML code here down below and there is text which does not have any HTML surrounding. Is there any method to hide the text "Enter" which is after "p" tag?
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> </p>
Enter <-- i want to hide this text
<div class="subhead"></div>
</div>
It is not possible to wrap it with a div or any other tag, so I need some different decision like JavaScript or some CSS?
I would consider a CSS hack with font-size:
.entry {
font-size:0;
}
.entry * {
font-size:initial;
}
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>
Another idea with visibility:
.entry {
visibility:hidden;
}
.entry * {
visibility:visible;
}
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>
Do you think it will works
var ele =document.getElementsByClassName('entry')[0]
ele.removeChild(ele.lastChild)
Sorry for late response but this is how you can do it with jquery. Just get all the content of a div, filter the content with no tags around and wrap them inside span with style property as display:none. This will hide that text for you.
$(".entry")
.contents()
.filter(function () {
return this.nodeType === 3 && this.nodeValue.trim() !== "";
}).wrap("<span style='display:none' ></span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> </p>
Enter <!-- i want to hide this text-->
<div class="subhead"></div>
</div>
Thanks
I have 5 paragraphs in my div and I need to style them differently.
Is there an easier way to do it rather than giving each paragraph a different class?
<div class="container-fluid">
<div class="row">
<div class="col bg-dark text-white">
<p class="text">Nikolina Tute 2 Mount Street, Manchester M2 5WQ</p>
<p class="text-2">#1 in Customer Service in the UK</p>
<p class="text-3">Free Shipping for Orders over 60$</p>
<p class="text-4">support#hlfonline.co.uk</p>
<p class="text-5">07441 430 469</p>
</div>
</div>
</div>
Just make a standard class and then make micro classes for the changes you want:
<p class="p-class"> Some Text </p>
<p class="p-class"> Some Text </p>
<p class="p-class diff-class"> I'm Different!! </p>
.p-class{
background: green;
text-align: center;
font-size: 1rem;
}
.diff-class{
"Some different stuff here"
}
If you don't want to write in the class name for each paragraph than you can replace ".p-class" with just "p" Keep in mind this will affect all "p" elements.
I'm aware these aren't good class-naming conventions.
Generally speaking, if each P tag needs to be accessed differently. Then yes you will need to put an ID/Class selector on each p tag. You can either use an ID on each p tag or do some type of subclasses in CSS and take advantage of the cascading effect.
.base{
color: green;
}
.firstP{
color:red
}
.lastP{
color: purple;
}
<div>
<p class="base firstP">Some text</p>
<p class="base">Some text</p>
<p class="base">Some text</p>
<p class="base">Some text</p>
<p class="base lastP">Some text</p>
</div>
Another thing you could do if you wanted to have cleaner markup in the HTML is nth-child selector. This way you HTML doesn't have a bunch of classes on it and all the work is done in the CSS file
#base p{
color: green;
}
#base p:nth-child(1){
color: red;
}
#base p:nth-child(5){
color: purple;
}
<div id="base">
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
</div>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I have the following markup:
.shwonlyclick {
display: none;
}
.asd>.delfirstdiv:first-child>.shwonlyclick:first-child {
display: block;
}
<div class="asd">
<div>title</div>
<div>sub title</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Show this</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
</div>
all tags are hidden, I only want the first one show. How?
Move your title and sub-title outside the parent div and fix your typo in your selector and it will work:
first-child is the first element inside it's parent (not the first element with a class name)
.shwonlyclick {
display: none;
}
.asd>.delfirstdiv:first-child>.shwonlyclick:first-child {
display:block;
}
<div>title</div>
<div>sub title</div>
<div class="asd">
<div class="delfirstdiv">
<p class="shwonlyclick">Show this</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
</div>
if you are unable to change the html layout, then you can use the adjacent sibling combinator to hide any divs that follow another (which will mean the first is shown):
.delfirstdiv+.delfirstdiv .shwonlyclick {
display: none;
}
<div class="asd">
<div>title</div>
<div>sub title</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Show this</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
</div>
This question already has answers here:
Hide text node in element, but not children
(6 answers)
Closed 4 years ago.
I have HTML code here down below and there is text which does not have any HTML surrounding. Is there any method to hide the text "Enter" which is after "p" tag?
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> </p>
Enter <-- i want to hide this text
<div class="subhead"></div>
</div>
It is not possible to wrap it with a div or any other tag, so I need some different decision like JavaScript or some CSS?
I would consider a CSS hack with font-size:
.entry {
font-size:0;
}
.entry * {
font-size:initial;
}
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>
Another idea with visibility:
.entry {
visibility:hidden;
}
.entry * {
visibility:visible;
}
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>
Do you think it will works
var ele =document.getElementsByClassName('entry')[0]
ele.removeChild(ele.lastChild)
Sorry for late response but this is how you can do it with jquery. Just get all the content of a div, filter the content with no tags around and wrap them inside span with style property as display:none. This will hide that text for you.
$(".entry")
.contents()
.filter(function () {
return this.nodeType === 3 && this.nodeValue.trim() !== "";
}).wrap("<span style='display:none' ></span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> </p>
Enter <!-- i want to hide this text-->
<div class="subhead"></div>
</div>
Thanks
I want to grab all the class name ('my-class') and change it's color to red EXCEPT for the last one
Apparently I've been googling and there's no such thing as :last-of-class or whatever. I'm having trouble trying to find a work around without using JS.
div1 and div2 are both dynamic! If div2 doesn't exist, then div1 should have the first p element red and the second not.
Please note I left a 'p' tag at the top because I don't want that being part of my selector. I just need the 'my-class' specifically.
or is there a selector I can write to grab all "p"s inside of my-container which include nested P's
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class"></p>
<p class="my-class"></p>
</div>
<div class="div2">
<p class="my-class"></p>
<p class="my-class"></p>
<p class="my-class"></p>
<p class="my-class"></p> <!-- This tag should not be red-->
</div>
</div>
I can also use sass so feel free to include that in if need be.
I don't know of any SINGLE rule that would do this, but a simple workaround would be to use 2 separate rules in conjunction:
.my-class {
color: red;
}
.div-2 .my-class:last-child {
color: // whatever you want the default to be
}
note that the order is important, setting the last child's color should be done after setting everything first
You can use the workaround below.
use div:last-child . that will select the last div in the container and if there is only one, it will select it and so...the last p from the last div will be of other color ( in this example )
.my-container div p.my-class {
color:red;
}
.my-container div:last-child p.my-class:last-child {
color:blue;
}
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class">a</p>
<p class="my-class">a</p>
</div>
<div class="div2">
<p class="my-class">a</p>
<p class="my-class">a</p>
<p class="my-class">a</p>
<p class="my-class">b</p> <!-- This tag should not be red-->
</div>
</div>
This will get the behavior you're looking for without any forced reflow:
.my-class:not(:last-child) {
color: red;
}
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class">a</p>
<p class="my-class">b</p>
</div>
<div class="div2">
<p class="my-class">c</p>
<p class="my-class">d</p>
<p class="my-class">e</p>
<p class="my-class">f</p> <!-- This tag should not be red-->
</div>
</div>