With the below HTML, how i can select the DIV depper (which has no children)?
I think that i can use nth-last-child but dont work because all divs has the last (and also the first)! :D
PD: Not is possible the use of the ID or CLASS property in the DIV deeper (because they are HTML existent files in web)
Html:
<div class="base">
<div>
<div>
<div>
<div>
<!-- recursive divs (quantity not defined...) -->
</div>
</div>
</div>
</div>
</div>
CSS selectors cannot look to the parent elements, sadly, so you can't see which elements don't have divs as children.
If you are using jQuery, you can do this to find the element:
$('.base :not(:has(*))').addClass('deepest');
Demo: http://jsfiddle.net/EhZax/
You'll have to use Javascript. Here's an example using jQuery:
$('.base *').filter(function(){
return ! $(this).find('> *').length;
});
See it here in action: http://jsfiddle.net/E6sec/
Update: If you want to, you could create your own :sterile selector. Here's an example:
jQuery.expr[':'].sterile = function(el) {
return ! el.children.length;
};
You could then just use it as you would any other pseudo selector:
$('.base :sterile');
Here's the fiddle: http://jsfiddle.net/FBw5q/
P.S. I used the native el.children since it's way faster than any of jQuery's methods. However, IE < 9 will include comments as children. If that concerns you, you can use jQuery's children() method.
You need Javascript for that. It's not possible with CSS only
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
How can i use findelement , to locate the 3rd div element from the element that has the id=1.custom-system-user.generatepassword and then the img element inside the third div sibling ?
please note that there is no guarantee that the table element is the first sibling, so what i need is access the third div relative to the table element Only (I can't rely on the div being the n-th sibling) ?
P.s - is there such a thing "nested" css selectors/locators ( table+div+div+div>img )?
Note
My simplified example (id attribute has been added only for debug purposes):
<html>
<body>
<table id="0.custom-System-User.generatePassword">Table</table>
<div>Foo</div>
<div>Bar</div>
<div>
<div>
<div>
<img id="my-image" />
</div>
</div>
</div>
</body>
</html>
Python script:
from selenium import webdriver
browser = webdriver.Chrome()
browser.get(URL)
el = browser.find_element_by_xpath('//table[contains(#id, generatePassword)]/following-sibling::div[3]//img')
el.get_attribute('id')
Output:
In [5]: el.get_attribute('id')
Out[5]: u'my-image'
xpath selector might be like '//table[contains(#id, generatePassword)]/following-sibling::div[3]/div/div/img'.
Assuming that there will be three div elements, you can use xpath easily
driver.findElement(By.xpath("//div[#class='x-form-item'][3]/div/div/img"))
try the following xpath:
"//div[contains(#id, '1.custom-System-User.x-auto')]//img"
If not working, can you please expand all sections of the provided HTML, since I can't know what's exactly there.
can you try this
driver.findElement(By.xpath("//table[#id='0.custom-System-User.generatePassword']/div[3]/div/div/img"))
I think this is very unlikely but is there any way in CSS to achieve moving elements in the DOM? Like moving jt-menu-item-price into the jt-header in the following?
<div class='jt-row'>
<div class='jt-header'>this is what I need done</div><div class='jt-menu-item-price'>37.23</div>
</div>
<div class='jt-row'>
<div class='jt-header'>this is what I need done<div class='jt-menu-item-price'>37.23</div></div>
</div>
Not using CSS, no. You can manipulate the DOM using JavaScript, but not with CSS. You could 'visually' move it with CSS, but that wouldn't affect the DOM structure, just how it is presented.
You have to use Javascript to manipulate the DOM. CSS never affects the DOM, just let you style it.
I tried searching for option to apply css to parent div but failed to achieve it. I finally implemented the same with jquery. Do we have any option for the below jquery line to implement with css
$('.description').parent().prev().closest('div').css('padding-top', '10px');
Currently no, there is not. This is similar to a previous thread -
Is there a CSS parent selector?
However, you could just apply a class or id to your parent and select it in CSS using that newly set class/id.
Assuming your html looks a bit like this:
<div>
<div class="description">
............
</div>
</div>
Then the jQuery to target the parent of 'description' would be:
$('.description').parent().css('paddingTop', '10px');
Fiddle here: http://jsfiddle.net/EFmf8/
(changes colours instead of padding to better illustrate)
Pity there's no CSS selector for this . . .
i want to add a style (display:none) to hide a div element with the class "xclass" but only if it contains a link with the href "/somedir/somepage.php" is this doable with CSS or CSS3 selectors?
below is some example code for the div i wish to hide, it could appear anywhere inside a web page.
<div class="xclass">
<div>
<div>
<a href="/somedir/somepage.php">
</div>
</div>
</div>
No, this isn't possible. Due to the way browsers handle CSS selectors, you cannot select a parent element based on its children.
This might be doable with JavaScript. Here's a jQuery snippet:
$('.xclass').each(function() {
if ($(this).has('a[href="/somedir/somepage.php"]')) {
$(this).hide();
}
});