Guys, I'm trying to write xpath or css to find/click on list element "All" based on known span(in this case SNG NAME below). On page, there are different lists Which can contain same list item called as "All". So we have to identify "All" based on span(in this case SNG NAME below)
can someone shed some light on my issue
<html>
<head>
<body>
<div class="grc_selected">
<div class ="lbl_selected">
<span> SNG NAME </span>
</div>
<div id="id1" class="cl1">
<ul id="id_ul">
<li class="tclass" title="[1] All">
<img class="treeIcon" src="1/2/3.gif"/>
<span class="inA">All</span>
</li>
</ul>
</div>
</body>
</head>
</html>
You could use an XPath query like:
//div[span=" SNG NAME "]/following-sibling::div//span[.="All"]
That targets the div which contains the span whose text value is SNG NAME, then moves to the following div (id1) and finally targets the span inside it containing the text All. This makes the assumption that the HTML is fixed (there's currently mismatching div tags) in such a way that the above query structure makes sense (by placing the missing closing div tag between the </ul> and final </div>).
Related
For a scraper I am looking to get a list of all elements on a page, which do not contain a certain child element. The DOM looks something like this
<scrape>
<div id='123'>
<span>test</span>
</div>
</scrape>
<scrape>
<div id='1234'>
<span>test</span>
</div>
</scrape>
<scrape>
<div id='12345'>
<span>test</span>
<span>don't include</span>
</div>
</scrape>
What I need to do is, my list needs to contain all scrape elements which do not contain a span with text don't include.
Any ideas?
Thanks!
This should work
//scrape[not(.//span[text()='don't include'])]
Literally:
Element(s) with tag name scrape not having inside it (child element) with span tag name and text with value don't include
Hey I am trying to place the 'title' attribute of a <section> tag inside a <h3> tag located just below and inside the <section> tag.The following works
<section title="General Information">
<h3>General Information</h3>
....
</section>
what I would like to do is not repeat 'General Information' inside the <h3> tag but use CSS content along with attr() to get the info inside of the tittle attribute in the <section> tag and place it inside the <h3> tags.
<section title="General Information">
<h3></h3>
....
</section>
section h3:after
{
content:attr(title);
}
This as expected looks for the 'title' attribute inside of the <h3> tag instead of the <section> tag. Is there any way I can achieve what I am trying to accomplish? Is what I am trying to accomplish the right way of doing things? I know I could skip the <h3> tags altogether and format the <section> tag to display whatever text is in 'title' attribute the same way that the <h3> tag would.
The attr() function can only obtain an attribute from the element that's generating the content. You won't be able to get the section element's title because it's not the element that's generating the content.
As ScottS mentions, you should really avoid having an empty heading element, as there wouldn't be a point in having it there at all then. Your best bet is to either leave out the title attribute (is it really needed?), or leave the content duplicated.
Is it correct to use element and block classnames on the same DOM node as in the example below?
<div class="b-panel">
<div class="b-panel__head"></div>
<div class="b-panel__body"></div>
<!-- b-nav is an individual block but also element of b-panel -->
<div class="b-nav b-panel__nav">
Prev
<span class="b-nav__label">Label</span>
Next
</div>
</div>
Thanks.
Yes, it is a mix:
You can also mix an element with a block using BEMHTML templates of a block. Let's specify that each item element from a goods block has the same formatting as a head block. For this you need to mix each item from a goods block with a box block from j library. [source: a tutorial from bem.info]
In your code:
<div class="b-panel">
<div class="b-nav b-panel__nav"></div>
</div>
The inner DOM element is a mix of the block b-nav and the element b-panel__nav.
I have the following code in HTML:
<span>
<a href="#">
<span class="caption">
<p id="first">Text1</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing1.jpg" width="218" height="181"
alt="thing1"/>
</a>
</span>
<span>
<a href="#">
<span class="caption">
<p id="first">Text2</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing2.jpg" width="218" height="181"
alt="thing2"/>
</a>
</span>
This code is used for making an overlayed text transition for images in CSS, but if I want to validate this HTML code, it says I have a duplicate ID (here "first" and "desc") but I honestly wouldn't know how I can simplify this. I need to resize "first" with font-size, and "desc" too.
For example: the paragraph with id "first" has to be 14px, and the paragraph with "desc" has to be 12px.
Only those <"p"> (without the quote) elements can not be a child element in the "span" element.
I wouldn't know how to solve this, do you guys have a solution?
Thanks for the answers, I've already changed the ID's to a class.
Still, I wouldn't know how to resize class "first" and "desc" in two different font sizes, because it's apparently "not done" to put a block element in an inline element
EDIT 3: Solved! Using div's is the best solution, I'm using this for school (kind of a project) for making a gallery. With float: left; I can place those images next to eachother.
Thanks for the tips!
You've made several mistakes:
id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.
That is due to the element type.
<p> tag is block level element
<span> tag is a inline element
Therefore encapsulating a block level element inside an inline level element is incorrect.
Because you can use classes.
Change:
1.
id="first" -- into --> class="first"
id="desc" -- into --> class="desc"
2.
You cannot put another tags into a span tag except <i>, <b>, <strong>, and <br /> ...
With <br/ > you can have 2 lines in your span tag
Just change it to:
<p class="first">
and
<p class="desc">
EDIT:
You best remove the spans completely. You don't need them. If you feel you need them to wrap block-level elements, you can do that with divs
I'm completely new to HTML and CSS, so please bear with me.
I want to change the color of an individual list item in an ordered list, but I don't want the list number to change style. I also need to do this within the one html-document -- no separate CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Test-page </title>
</head>
<body>
<h1> An html-file </h1>
<ol>
<li> Item 1 </li>
<li style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>
</body>
</html>
The only thing I can think of to solve this using inline styling, is:
<ol>
<li> Item 1 </li>
<li><p style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>
But the list items will appear to be separate paragraphs.
I don't want to use the font-tag, and I want to use HTML5. I want it to be as short as possible, in one file, therefore inline styling.
Any CSS rule that you set on a li element also applies to the list item marker (bullet, number). This is inconvenient, and CSS still lacks any way to style the list marker separately.
So your approach of using something like <li><p style="color:blue"> Item 2 </li> is the workaround you need to use, but when selecting the added inner element, you need to consider the consequences. A p element has default top and bottom margin, so using it, you would need to remove them here:
<li><p style="color:blue; margin:0"> Item 2 </li>
A simpler way is to use div instead of p, since div is a semantically emply block-level container element, which causes no change in default rendering except that its content starts on a fresh line and the content after it starts on a fresh line, which happens here anyway due to the list markup. So:
<li><div style="color:blue"> Item 2</div></li>
Instead of div, you can use span, if there is only inline (phrase-level) content. But div is more flexible, as it allows elements like inner lists, tables, etc.
LIke this
demo
css
ol li span{
color:blue;
}
Try using the span tag in place of p. And don't forget to close the tags properly:
<ol>
<li><span style="color:blue">Item 2</span></li>
</ol>
All the best.
<li><span style="color:blue">Item</span>2</li>