I have the following issue at hand where I need to get part of the text without including a tag. just to be more clear, I have the following code:
<div class="field-item even">
<p> text text text</p>
<p> text text text <a class="people-articles">text text</a> text text</p>
<p> text text text</p>
</div>
So I'm trying to get the text inside the p tag but not the a class="people-articles". and here what I've done so far but its not working
//div[#class="field-item even"] and [not a(#class='people-articles')]
Can someone tell me what am i doing wrong? and how to obtain p without a ?
this should be straight forward.
//div[#class="field-item even"]/p[not(a[#class="people-articles"])]/text()
Related
In the below code, I need to hide the 2nd tag and it's related content, how can I do that in Css
<div id="content-list">
<b>Title:</b> some random text <br/>
<b>Title2:</b> some random text 2 <br/>
</div>
With the below css I can only hide the 2nd b tag, but not able to hide the text.
div > b:nth-child(1) {
display: none;
}
Note: HTML mockup can't be modified due to various reason.
There is no way to reference a text node in CSS. However there are probably some hacky ways to accomplish this.
One way you could do this, if the layout supports it, would be to hide the title and anything adjacent to it using a large, negative number for margin-left.
.content-list > b:nth-of-type(2) {
margin-left: -1000000px;
}
<div class="content-list">
<b>Title:</b> some random text <br />
<b>Title 2:</b> some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text <br />
<b>Title 3:</b> some random text <br />
</div>
As you can see if you run the snippet, there are some issues. Mainly there will just be a blank like in the place where the text was. Plus any one using a text reader will still have access to it.
The only real solution will be either to fix your html or use JavaScript.
"I can only hide the 2nd b tag, but not able to hide the text"
That's because the text "some random text 2" is outside of the tags.
Since you can't actually select text nodes directly, one work-around would be to set the font-size of the parent element to 0. Then reset the font-size for those desired b elements. In doing so, only the b elements should appear, and the adjacent text nodes should effectively be hidden.
div {
font-size: 0px
}
div > b:nth-child(1) {
font-size: 16px
}
<div>
<b>Title:</b> some random text <br/>
</div>
An alternative solution is to change the original HTML to something more like this, which is highly recommended in terms of accessibility:
#content-list div:nth-child(2) {
display: none;
}
<div id="content-list">
<div>
<h2>Title 1</h2>
<span>some random text</span>
</div>
<div>
<h2>Title 2</h2>
<span>some random text</span>
</div>
<div>
<h2>Title 3</h2>
<span>some random text</span>
</div>
</div>
Using Cheerio, I'm trying to search an HTML for certain text and add a link to it only if it is not linked already.
For example:
<div>
<p> this is an example link </p>
</div>
I want to transform to:
<div>
<p> this is an example link </p>
</div>
Hi i have been trying to get all the text part within the div - p tags up to the hr tag so somebody gave this xpath
//div[#class="entry"]/*[not(preceding-sibling::hr | self::hr)]/text()
which works fine but this ignores the text part within the <.a> tag in the p tag
any ideas to grab that text as well?
<div class="entry">
<p> some text</p>
<p> some text2</p>
<p> some text3</p>
<p> some text4
<a href='somelink'> this text here i want to get through xpath</a>
some text5
</p>
<hr>(up to this hr tag)
<p> some text5</p>
<hr>
<p> some text6</p>
</div>
One way might be //div[#class="entry"]/*[not(preceding-sibling::hr | self::hr)]//text() though I might prefer to simply select the elements //div[#class="entry"]/*[not(preceding-sibling::hr | self::hr)] and use the string value.
You can simply pull data based on xpath.
//div[#class="entry"]/p[0]
//div[#class="entry"]/p[1]
//div[#class="entry"]/p[2]
//div[#class="entry"]/p[3]
//div[#class="entry"]/p[4]
//div[#class="entry"]/p[5]
I'm adding content to a predefined layout that I cannot modify but allows any HTML. I wish to align a piece of text like a floating text box but due to the h4 and p classes that I can't change it is proving difficult.
What I'd like to see is:
But it currently looks like:
The resulting HTML is currently:
<div class="element property-line"><h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR <div style="line-height: 90%;";>
<i> quite a long but of text that needs to wrap</i></div>
<p></p></div>
...where my content starts at BAR and ends with the i and div end tags.
I think I may be missing a formatting trick.
<div class="element property-line">
<h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR
<span style="line-height: 90%;">
<i> quite a long but of text that needs to wrap</i>
</span>
</p>
</div>
That should be more what you're after, <span> tags are suited for changing/styling text within paragraphs because <div> tags are more for structural elements.
Your original code also had an extra opening <p> on the last line.
I used MS Word to create a document as I wanted it to appear and then tripped out all the extraneous twaddle it puts in; leaving me with:
<p style="margin-left:50pt; text-indent:-50pt">
then found a workaround to mimic the <h4 class= and <p class= sections so that it all fit into one <div> instead.
This is a very small HTML question that I am sure you guys will answer quickly. I post things on my website like this
<div id="content">
<p>
<hh>Header text here</hh>
Post information here, text and stuff.
</p>
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
</div>
but when I try to insert a <center> or alight left tag, the <p> closes automatically, and everything after the <center> tag is outside the paragraph box. I used inspect-element in firefox, and I can see it closes with a </p> that I never typed, right before any calls to centered text.
For example:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<center>This text is centered</center>
</p>
is rendering as this:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
<center>This text is centered</center>
</p>
This is really frustrating, and if someone could help me out that would be amazing. using <div align-right> also doesn't work. If it helps, I can set the entire <p> to align any way and it works.
It ONLY breaks when I differ from the set orientation within that tag.
From w3school :
Use CSS to center text!
The tag is not supported in HTML5. Use CSS instead.
The element is deprecated in HTML 4.01.
http://www.w3schools.com/tags/tag_center.asp
It is because center acts like a p. And you cannot put a p in a p.
EDIT : To answer to your comment, you should probably do this :
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<span>This text is centered</span>
<p>
And in your css add this
#content p span { display:block; text-align:center; }
(It also works with an a tag if you want it)
That's probably because you can't use a hh-tag in a p-tag then. (Not sure, but that's mostly)