I've been up for hours trying and failing to make this work.
I have some code like this:
<h1 class="title ">MasterClass Lessons</h1>
<div class="view view-uc-products view-id-uc_products view-display-id-page_4 3col-grid view-dom-id-1">
<div class="view-content">
<table class="views-view-grid">
<tbody>
<tr class="row-1 row-first">
<td class="col-1"><div class="panel-display panel-1col clear-block" >
<div class="panel-panel panel-col">
<div>
<div class="views-field-field-image-cache-fid">
<div class="field-content">
<a href="/content/gold-pass-all-lessons">
</div>
</div>
<div class="views-field-title">
<span class="field-content">GOLD PASS - ALL LESSONS!</span>
</div>
I want to target the class "views-field-title" with a style sheet, but I only want to apply a style when it's a subclass of "3col-grid" which is specified in a div a few levels above. Drupal lets me specify my own class name (I used 3col-grid) for the specific purpose of this CSS targeting, but when I do the following…
<style>
.3col-grid .views-field-title {
font-weight:bold;
}
</style>
It doesn't work.
I also tried
.3col-grid>.views-field-title
and
.3col-grid * .views-field-title
and
.3col-grid*.views-field-title
I'm sure there must be a way to make it work, and I'm sure it's quite simple.
Anyone who can tell me what that is will make me a happy man.
Thanks,
Joe
Your HTML is invalid.
CSS classnames cannot begin with numbers.
Once you fix that, you can use the descendant selector:
.OuterClass .InnerClass
Related
Is it possible to write a CSS selector matching the element which does not contain any attributes or class names?
For example, I have html like the following (but with tons of divs and dynamic class names) and I want to match the second div (it does not contain class)
<div class="xeuugli x2lwn1j x1cy8">
<div>
<div class="xeuugli x2lwn1j x1cy8">
<div class="xeuugli x2lwn1j n94">
<div class="x8t9es0 x10d9sdx xo1l8bm xrohj xeuugli">$0,00</div>
</div>
</div>
<div class="xeuugli x2lwn1j x1cy8zghib x19lwn94">
<span class="x8t9es0 xw23nyj xeuugli">Helloworld.</span>
</div>
</div>
</div>
P.S. Getting the div like div:nth-child(2) is not a solution.
P.P.S. Could you please advise in general why the dynamic class names are used in the development?
Well, if you can't use classes, maybe try giving it an ID if possible, like
<div class="xeuugli x2lwn1j x1cy8">
<div id="myId">
<div class="xeuugli x2lwn1j x1cy8">
<div class="xeuugli x2lwn1j n94">
<div class="x8t9es0 x10d9sdx xo1l8bm xrohj xeuugli">$0,00</div>
</div>
</div>
<div class="xeuugli x2lwn1j x1cy8zghib x19lwn94">
<span class="x8t9es0 xw23nyj xeuugli">Helloworld.</span>
</div>
</div>
</div>
ad then you can select the ID via the css #id selector like so:
#myId {
/*stuff here*/
}
If you can't have IDs either, we could get really creative by finding a grouping element which you will swear to never use on another place, like <section> or <article>, and then you could use
const elem = document.getElementsByTagName("article")[0];
elem.style.border = '2px solid red';
which returns an array of all elements with that tag name, which in our case would be the only one you need. Then you could via Javascript give it the css you need.
I've found the lowest class: <span class="pill css-1a10nyx e1pqc3131"> of multiple elements of a website but now I want to find the related/linked upper-class so for example the highest <div class="css-1v73czv eh8fd9011" xpath="1">. I've got the soup but can't figure out a way to get from the 'lowest' class to the 'highest' class, any idea?
<div class="css-1v73czv eh8fd9011" xpath="1">
<div class="css-19qortz eh8fd9010">
<header class="css-1idy7oy eh8fd909">
<div class="css-1rkuvma eh8fd908">
<footer class="css-f9q2sp eh8fd907">
<span class="pill css-1a10nyx e1pqc3131">
End result would be:
INPUT- Search on on all elements of a page with class <span class="pill css-1a10nyx e1pqc3131">(lowest)
OUTPUT - Get all related titles or headers of said class.
I've tried it with if-statements but that doesn't work consistently. Something with an if class = (searchable class) then get (desired higher class) should work.
I can add any more details if needed please let me know, thanks in advance!
EDIT: Picture per clarification where the title(highest class) = "Wooferland Festival 2022" and the number(lowest class) = 253
As mentioned, question needs some more information, to give a concret answer.
Assuming you like to scrape the information in the picture based on your example HTML you select your pill and use .find_previous() to locate your elements:
for e in soup.select('span.pill'):
print(e.find_previous('header').text)
print(e.find_previous('div').text)
print(e.text)
Assuming there is a cotainer tag in HTML structure like <a> or other you would select this based on the condition, that it contains a <span> wit class pill:
for e in soup.select('a:has(span.pill)'):
print(e.header.text)
print(e.header.next.text)
print(e.footer.span.text)
Note: Instead of using css classes, that can be highly dynamic, try use more static attributes or the HTML structure.
Example
See both options, for first one the <a> do not matter.
from bs4 import BeautifulSoup
html='''
<a>
<div class="css-1v73czv eh8fd9011" xpath="1">
<div class="css-19qortz eh8fd9010">
<header class="css-1idy7oy eh8fd909">some date information</header>
<div class="css-1rkuvma eh8fd908">some title</div>
<footer class="css-f9q2sp eh8fd907">
<span class="pill css-1a10nyx e1pqc3131">some number</span>
<footer>
</div>
</div>
</a>
'''
soup = BeautifulSoup(html)
for e in soup.select('span.pill'):
print(e.find_previous('header').text)
print(e.find_previous('div').text)
print(e.text)
print('---------')
for e in soup.select('a:has(span.pill)'):
print(e.header.text)
print(e.header.next.text)
print(e.footer.span.text)
Output
some date information
some title
some number
---------
some date information
some date information
some number
I'm using the statement document.querySelector("[data-testid='people-menu'] div:nth-child(4)") in the console to give me the below HTML snippet:
<div>
<span class="jss1">
<div class="jss2">
<p class="jss3">Owner</p>
</div>
</span>
<div class="jss4">
<div class="5" title="User Title">
<p class="jss6">UT</p>
</div>
<div class="jss7">
<p class="jss82">User Title</p>
<span class="jss9">Project Manager</span>
</div>
</div>
</div>
I'd like to extend the statement in the console to extract the title "User Title" but can't figure out what combination of nth-child or nextSibling (or something else) to use. The closest I've gotten is:
document.querySelector("[data-testid='people-menu'] div:nth-child(4) span:nth-child(1)")
which gives me the span with class jss1.
I expected document.querySelector("[data-testid='people-menu'] div:nth-child(4) span:nth-child(1).nextSibling") to give me the div with class jss4, but it returns null.
I can't use class selectors because those are generated dynamically at build.
Why not just add [title] onto your querySelector?
document.querySelector("[data-testid='people-menu'] div:nth-child(4) [title]")
You can then get whatever you are looking for from that section? This is assuming title will be unique attribute in this section of html
The divs of the HTML page I am targeting look like this:
<div class="white-row1">
<div class="results">
<div class="profile">
<a href="hrefThatIWant.com" class>
<img src = "http://imgsource.jpg" border="0" width="150" height="150 alt>
</a>
</div>
</div>
</div>
<div class="white-row2">
// same content as the div above
</div>
I want to scrap collect the href in each div in a list.
This is my current code:
List<HtmlAnchor> profileDivLinks = (List)htmlPage.getByXPath("//div[#class='profile']//#href");
for(HtmlAnchor link:profileDivLinks)
{
System.out.println(link.getHrefAttribute());
}
This is the error I am receiving (which goes on first line of the for statement):
Exception in thread "main" java.lang.ClassCastException: com.gargoylesoftware.htmlunit.html.DomAttr cannot be cast to com.gargoylesoftware.htmlunit.html.HtmlAnchor
What do you think the issue is?
The issue is you're getting an attribute and then you're casting that attribute to an anchor. I guess the solution with the minimal change to your code would be just modifying the XPath to return an anchor:
htmlPage.getByXPath("//div[#class='profile']//a");
try
//div[#class='profile']//data(#href)
I have a problem with toggle on this list:
<div id="list">
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
... //and so on
</div>
I want clicked "#segment" to toggle child *"#segm_content"* and change img in "#opener".
I made it working with this code:
$('#segment').toggle(function() {
$('#opener').html('<img src="images/open.png"/>');
$('#segm_content').hide(500);
}, function() {
$('#opener').html('<img src="images/close.png"/>');
$('#segm_content').show(500);
});
But I can't figure out how to do it only for one "#segment" at a time.
This code toggles everything, which I don't want.
I am stuck at this point, any suggestions please?
Many thanks!
I really wouldn't recommend this. The point of an id is to reference a unique element. If you want to select multiple elements, you should define a class instead and have jQuery call that. Multiple ids is invalid HTML. But you could, per sé, do this by using changing your jQuery code to the following.
(Here is my jsFiddle: http://jsfiddle.net/KzVmK/)
$('[id="segment"]').toggle(
function(){
$(this).find('[id="opener"]').html('<img src="open.png" alt="Close" />');
$(this).find('[id="segm_content"]').hide(500);
},
function(){
$(this).find('[id="opener"]').html('<img src="close.png" alt="Open" />');
$(this).find('[id="segm_content"]').show(500);
}
);
Again, let me stress again that this is a bad idea, because you will not have unique id selectors in your document. This is really bad practice. There are times when you will want to select an individual element in the DOM and this will make that next to impossible. I would highly advise you to define a class for the elements (you can still define CSS classes, e.g. <div class="opener my-class" /> or <div class="segm_content my-class" />).
(Also, a helpful tip with this code: rather than populating the HTML elements with the same image that is also in the jQuery code [which is redundant], leave the <div id="opener" /> elements empty. Then, right after you define the toggle function, run the click event, like so: $('[id="$segment"]').toggle(...).click();
http://jsfiddle.net/XPXBv/).
General Theme Settings
Back-Ground Color
Text Color
<div class="Settings" id="GTSettings">
<h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
<div class="options">
<table>
<tr>
<td><h4>Back-Ground Color</h4></td>
<td><input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly"></td>
</tr>
<tr>
<td><h4>Text Color</h4></td>
<td><input type="text" id="body-fontColor" class="themeselector" readonly="readonly"></td>
</tr>
</table>
</div>
</div>
$(document).ready(function(){
$(".options").hide();
$(".SettingsTitle").click(function(e) {
var appThemePath = $("#appThemePath").text();
var closeMenuImg = appThemePath+'/images/toggle-collapse-light.gif';
var openMenuImg = appThemePath+'/images/toggle-collapse-dark.gif';
var elem = $(this).next('.options');
$('.options').not(elem).hide('fast');
$('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
elem.toggle('fast');
var targetImg = $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ? openMenuImg : closeMenuImg;
$(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);
});
});