I am trying to select the first p element who's direct preceding sibling is also a p element. I have highlighted the below code with example of what i am looking for please.
<div class="vacancy-left">
<h2>Machine Operator / Print Operator</h2>
<h3>Vacancy Ref:</h3>
<p>I-1056</p>
<p>Are you self-motivated with a..</p> <!-- THIS NODE -->
<p>The ideal candid...</p>
<p>Hours of Work Monday- Friday 07.30-16.30</p>
<h3>Salary:</h3>
<p>Start pay from £8.00 per hour</p>
<p> Immediate Start</p>
<h2>Apply For This Vacancy</h2>
<p></p>
<p>Return to Industrial Vacancies</p>
</div>
I've tried a couple things such as .//p[preceding-sibling::p] but that selects a few p elements that have any preceding element as a p.
Thanks
You can use //p[preceding-sibling::*[1][self::p]] to select all p elements where the nearest preceding sibling element is also a p element, however it would select more than one p in your sample as several p elements have another p element as the nearest preceding sibling element.
Related
As far as I know, this is right:
<div>
<p>some words</p>
</div>
But this is wrong:
<p>
<div>some words</div>
</p>
The first one can pass the W3C validator (XHTML 1.0), but the second can't. I know that nobody will write code like the second one. I just want know why.
And what about other tags' containment relationship?
An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html. It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".
For the P element, it specifies the following, which indicates that P elements are only allowed to contain inline elements.
<!ELEMENT P - O (%inline;)* -- paragraph -->
This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which says that the P element "cannot contain block-level elements (including P itself)."
In short, it is impossible to place a <div> element inside a <p> in the DOM because the opening <div> tag will automatically close the <p> element.
According to HTML5, the content model of div elements is flow content
Most elements that are used in the body of documents and applications are categorized as flow content.
That includes p elements, which can only be used where flow content is expected.
Therefore, div elements can contain p elements.
However, the content model of p elements is Phrasing content
Phrasing content is the text of the document, as well as elements that
mark up that text at the intra-paragraph level. Runs of phrasing
content form paragraphs.
That doesn't include div elements, which can only be used where flow content is expected.
Therefore, p elements can't contain div elements.
Since the end tag of p elements can be omitted when the p element is immediately followed by a div element (among others), the following
<p>
<div>some words</div>
</p>
is parsed as
<p></p>
<div>some words</div>
</p>
and the last </p> is an error.
Look at this example from the HTML spec
<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb#foo.org -->
<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb#foo.org</TR>
</TABLE>
</DIV>
Did you notice something? : There was no closing tag of the <p> element. a mistake in the specs ? No.
Tip #1: The closing tag of <p> is OPTIONAL
You may ask: But then how would a <p> element knows where to stop?
From w3docs:
If the closing tag is omitted, it is considered that the end of the paragraph matches with the start of the next block-level element.
In simple words: a <div> is a block element and its opening tag will cause the parent <p> to be closed, thus <div> can never be nested inside <p>.
BUT what about the inverse situation ? you may ask
well ...
Tip #2: The closing tag of the <div> element is REQUIRED
According to O’Reilly HTML and XHTML Pocket Reference, Fourth Edition (page 50)
<div> . . . </div>
Start/End Tags
Required/Required
That is, the <div> element's end will only be determined by its closing tag </div> hence a <p> element inside is will NOT break it.
After the X HTML, the conventions has been changed, and now it's a mixture of conventions of XML and HTML, so that is why the second approach is wrong and the W3C validator accepts the things correct that are according to the standards and conventions.
Because the div tag has higher precedence than the p tag. The p tag represents a paragraph tag whereas the div tag represents a document tag.
You can write many paragraphs in a document tag, but you can't write a document in a paragraph. The same as a DOC file.
What XPath expression will allow me to find an element in arbitrary position in a set of nesting <div>s and only those elements?
For example, how to find all the <a> elements except the last one in this HTML fragment:
<div id="0">
<a href="first.com"/>
<div id="1"></div>
<div id="2">
<div id="2.1">
<div id="2.11">
<a href="second.com" />
</div>
</div>
</div>
<div id="3"><a href="third.com" /></div>
</div>
<a href="dont_find_this_one.com" />
This XPath,
//a
will select all a elements in the document.
Update per requirements clarification comment:
This XPath,
//div[#id="0"]//a
will select all a elements under all id="0" div elements in the document.
Another way of writing it could be :
//a[ancestor::div[#id="0"]]
Select all anchor elements with a specific common ancestor (div with a specific attribute).
Other options, but more risky :
//a[parent::div]
Select all anchor elements with a div element as a parent.
(//a)[not(position()=last())]
Select all anchor elements except the last one present on the page.
As far as I know, this is right:
<div>
<p>some words</p>
</div>
But this is wrong:
<p>
<div>some words</div>
</p>
The first one can pass the W3C validator (XHTML 1.0), but the second can't. I know that nobody will write code like the second one. I just want know why.
And what about other tags' containment relationship?
An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html. It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".
For the P element, it specifies the following, which indicates that P elements are only allowed to contain inline elements.
<!ELEMENT P - O (%inline;)* -- paragraph -->
This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which says that the P element "cannot contain block-level elements (including P itself)."
In short, it is impossible to place a <div> element inside a <p> in the DOM because the opening <div> tag will automatically close the <p> element.
According to HTML5, the content model of div elements is flow content
Most elements that are used in the body of documents and applications are categorized as flow content.
That includes p elements, which can only be used where flow content is expected.
Therefore, div elements can contain p elements.
However, the content model of p elements is Phrasing content
Phrasing content is the text of the document, as well as elements that
mark up that text at the intra-paragraph level. Runs of phrasing
content form paragraphs.
That doesn't include div elements, which can only be used where flow content is expected.
Therefore, p elements can't contain div elements.
Since the end tag of p elements can be omitted when the p element is immediately followed by a div element (among others), the following
<p>
<div>some words</div>
</p>
is parsed as
<p></p>
<div>some words</div>
</p>
and the last </p> is an error.
Look at this example from the HTML spec
<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb#foo.org -->
<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb#foo.org</TR>
</TABLE>
</DIV>
Did you notice something? : There was no closing tag of the <p> element. a mistake in the specs ? No.
Tip #1: The closing tag of <p> is OPTIONAL
You may ask: But then how would a <p> element knows where to stop?
From w3docs:
If the closing tag is omitted, it is considered that the end of the paragraph matches with the start of the next block-level element.
In simple words: a <div> is a block element and its opening tag will cause the parent <p> to be closed, thus <div> can never be nested inside <p>.
BUT what about the inverse situation ? you may ask
well ...
Tip #2: The closing tag of the <div> element is REQUIRED
According to O’Reilly HTML and XHTML Pocket Reference, Fourth Edition (page 50)
<div> . . . </div>
Start/End Tags
Required/Required
That is, the <div> element's end will only be determined by its closing tag </div> hence a <p> element inside is will NOT break it.
After the X HTML, the conventions has been changed, and now it's a mixture of conventions of XML and HTML, so that is why the second approach is wrong and the W3C validator accepts the things correct that are according to the standards and conventions.
Because the div tag has higher precedence than the p tag. The p tag represents a paragraph tag whereas the div tag represents a document tag.
You can write many paragraphs in a document tag, but you can't write a document in a paragraph. The same as a DOC file.
With span:last-of-type I can select last span element of its parent. But is there any solution to select last element with any .class of its parent? Like:
div .myclass:last-of-type {
...
}
from:
<div>
<span class="myclass">One</span>
...
<i>text</i>
<b class="myclass">Two</b> <!-- this i want select -->
<b>more text</b>
<i>text</i>
<span>Three</span>
</div>
http://codepen.io/Chovanec/pen/lkojd
No, there is no way to do this. :nth-child and its ilk only apply to elements, not just general selectors. Therefore, .myclass:last-of-type will only work the way you want it to if the last <b> is selected. In your example, it won't work. Your only option is to change your markup somehow.
This is my problem: I have to select and remove ALL the elements that follow one precise element.
Here an example of how my webpage is structured:
<h2>
<span class="myClass" id="Note">Note</span>
</h2>
<ol class="secondClass">...</ol>
<h2>...</h2>
<ul>...</ul>
<h2>...</h2>
<ul>...</ul>
<table class="tableOne">...</table>
<div class="otherClass">
In particular i have to delete ALL elements after <span class="myClass" id="Note">Note</span>
I read a lot of topic about the NextAll() Jquery Selector, but however I can't manage to solve my problem.
.nextAll() targets siblings and your span doesn't have any. Perhaps you should be targeting its parent. Eg,
$(".myClass").parent().nextAll().remove()
The problem is that nextAll only gets sibling elements. For a generic solution to this problem, if you use nextAll you would need to call it on the element and all parent elements:
$(".myClass").parents().andSelf().nextAll().remove();