In the code below how to remove the li based on the value of hyperlink?
<ul class="clean menu sub">
<li>
<a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&lid=choose_category_internet_fios" rel="1">FiOS Internet</a>
</li>
<li>
<a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&lid=choose_category_internet_hsi" rel="1">High Speed Internet</a>
</li>
<li class="last" style="margin-bottom:7px;">
<a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&lid=choose_category_internet_dialup" rel="1">Dial-up</a>
</li>
</ul>
I get the valu of the hyperlink in a variable. Now based on the value other 2 li's should be deleted. How can we achieve this using mootools?
Now if I get flag="Dial-up", Other 2 li's should be deleted and the code should look like this:
<ul class="clean menu sub">
<li class="last" style="margin-bottom:7px;">
<a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&lid=choose_category_internet_dialup" rel="1">Dial-up</a>
</li>
</ul>
Here I get the value of Flag from server.
If you can leverage on link names the solution is a single line:
http://jsfiddle.net/5axJc/
$$("ul.menu :not(a[name='&li=choose_category_internet_dialup']) !> li").destroy()
calling destroy on a collection (I would have used document.getElements in production code) will call your method on every elements in it.
In the selection expression there are several esoteric selector and maybe it worth some deeper explanation:
ul.menu is a plain class based selector
:not(a[name='&li=choose_category_internet_dialup'])
select links based on the name attributes that do :not() match the value
!> is a parent selector
hence you can read the selector as:
select all the li into the menu ul that are father of an anchor whose name is NOT your desired value.
EDIT
To select only the li that are parents of the searched one just select it with
ul.sub a[name='&lid=choose_category_internet_fios'] !> li and based on that
select all siblings with ~ li. the result is like this.
$$("ul.sub a[name='&lid=choose_category_internet_fios'] !> li ~ li").dispose()
Note we have get rid of the :not() selector. To me it is a more linear way to accomplish the task.
Related
I am new to HTML and so here is very basic question, for which unfortunately I could not find a hint any where . So I am putting it here. Basically, I have to use the tags href, and style both. How do I do it? For example, consider the following:
I have a list like this:
<ul>
<li style="color:blue;font-size:20px;text-align:justify">that is inclusive, innovative, and relevant</li>
</ul>
Now I want to have a hyperlink on the text :
that is inclusive, innovative, and relevant
For example, clicking the above text should go to google.com
How do I do this?
Here you go let me know the style is preperly applied or not.
<ul>
<li style="color:blue;font-size:20px;text-align:justify">that is inclusive, innovative, and relevant</li>
</ul>
You need to use the anchor tag <a> and set the href property to your url. The display text can go inside the element.
Visit Google
A list with two links:
<ul>
<li style="color:blue;font-size:20px;text-align:justify">
<a href="https://www.example.com">
that is inclusive, innovative, and relevant
</a>
</li>
<li style="color:blue;font-size:20px;text-align:justify">
<a href="https://www.w3.org/MarkUp/1995-archive/Elements/A.html">
Anchor tag spec
</a>
</li>
</ul>
Styles can be applied to the link or the list item. The browser does some default styling to anchor tags to make them blue and underlined, and purple after being visited. Often times this default styling is removed or overridden.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I want to find every Child-node of an element thats in the n-th position, eg. in:
<span class="passive match" id="1"></span>
<ul>
<li>
<span class="active match"></span>
<ul>
<li>
<span class="active match"></span>
</li>
</ul>
</li>
</ul>
<span class="passive match" id="2"></span>
<ul>
<li>
<span class="passive match"></span>
<ul>
<li>
<span class="active"></span>
</li>
</ul>
</li>
</ul>
I want to find both "active match" li Child of the ul next to the span "passive match"
Something like:
span.passive.match + ul:'has-Child'(span.active.match) {CSS here}
But the corresponding span.active.match can be a 3rd/6th/9th/12th etc. child-element from "passive match". Is there a CSS-Selector that can handle this or do I need to write a jQuery-Script that does it (which would be inefficient I'd say as I would need a recursive function that may run across 10k+ elements)?
Basically i have a tree filled with folders (.passive) and data (.active) and i want to display every data thats matched with a given filter (.match) and its path but want to hide every folder that has no child thats matching the filter. So the span with id="2" should be hidden, while the id="1" should show up in my dom structure. As the tree is generated by a plugin with private function and is used in multiple situation i cant just edit/ overwrite it but have to either use the CSS-Selectors to hide the unnecessary objects or use a javascript-script to do so. Maybe you'll have a better idea.
For this you need the :has() pseudo-class…
span.passive.match + ul:has(span.active.match)
… but it is not a standard (it is in draft status) and no browser currently supports it.
In the meantime, alter your HTML so there is a class on the ul.
Ideally, do this when you generate the HTML, but you could modify it after the fact with JavaScript.
$(".active.match").parents("ul").addClass("contains-active-match");
span.passive.match + ul.contains-active-match {
background: pink
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="passive match" id="1">a</span>
<ul>
<li>
<span class="active match">b</span>
<ul>
<li>
<span class="active match">c</span>
</li>
</ul>
</li>
</ul>
<span class="passive match" id="2">d</span>
<ul>
<li>
<span class="passive match">e</span>
<ul>
<li>
<span class="active">f</span>
</li>
</ul>
</li>
</ul>
Here is the HTML of my tool. Each <li is a button for a page. Once I click the page number, that element will no longer have the child <a. So in the below example, page 2 is selected.
<span class="pagingWidget"
<ul>
<li>
<a class="paginate-page" href="javascript:;">1</a>
</li>
<li>2</li>
<li>
<a class="paginate-page" href="javascript:;">3</a>
</li>
<li>
<a class="paginate-page" href="javascript:;">4</a>
</li>
</ul>
</span>
I want to create an object that will always select the page element that is selected. So I want span.pagingWidget > ul > li, that does NOT have a child of <a. Is that possible with the negation CSS pseudo-class?
Unfortunately, what you're attempting to do is not possible through CSS alone.
The closest thing to what you're describing is the :empty pseudo class but that is used to select elements that are completely empty.
I'm new to selenium ide and i want to automate some websites. i want it to be like this.
Click
Click Link 1
do some clicking inside that link
go back to the list of link
Click Link 2
do some clicking inside that link
go back to the list of link
Click Link 3
and so on
my only problem here is i don't know how it will click the first link from the top. this is the html of the website.
<h5>20 seconds ago</h5>
<ul>
<li class="notification-posted">
<img height="15" alt="" src="/assets/images/icons/notification-posted.png">
wews
send new
post **Link 1**
</li>
</ul>
<h5>3 minutes ago</h5>
<ul>
<li class="notification-posted">
<img height="15" alt="" src="/assets/images/icons/notification-posted.png">
yokol
submitted a new
post **Link 2**
</li>
</ul>
<h5>4 minutes ago</h5>
<ul>
<h3>6 minutes ago</h3>
<ul>
<h5>7 minutes ago</h5>
<ul>
<h2>8 minutes ago</h2>
<ul>
<li class="notification-posted">
<li class="notification-posted">
<li class="notification-posted">
<li class="notification-posted">
<li class="notification-posted">
<img height="15" alt="" src="/assets/images/icons/notification-posted.png">
hey
send new
post **link 3**
</li>
</ul>
I haven't used Selenium ide, but I have used Selenium Webdriver for python which is similar
You just need to locate your element by css selector, specifically structural selectors; this is prob the easiest way if you have to dig through a lot of markup that doesn't have ids/classes
CSS has descendent selectors and psuedo-element selectors that allow you to target specific elements based solely on their position within the DOM, without needing an id or class
you can use the :nth-of-type() psuedo element, which targets the specific occurrence of that element based on the number you pass to it
for example in plain css:
a:nth-of-type(1)
would look within the body and select the a that is the first of its type. if you used 2 instead, it would target the second occurrence of an anchor.
for example, in selenium.webdriver this is how you'd find your element:
# ff is the webdriver.Firefox() instance
firstAnchor = ff.find_element_by_css_selector("a:nth-of-type(1)")
secondAnchor = ff.find_element_by_css_selector("a:nth-of-type(2)")
You can use that to target the 1st, 2nd, 3rd etc elements. There's also css attribute selectors too if you need to target an element based on a specific attribute value
ff.find_element_by_css_selector("a[href='/account/54351-wews']")
good luck mayne. cholla cholla hee haw
I'm putting together a WP website, and on the menu bar the active menu item is underlined. All of the menu items (li) had a padding-right set on them, but I need to take it off the active element so that the border on the bottom only extends to the end of the text. To make up for it, I need to somehow target the next li but I can't quite figure out how to do it. I'm working in the context of someone else's WP theme which is always a challenge but I think this is probably doable, I just don't know quite how to combine the CSS selectors. Here's the basic menu structure:
<nav id="top-menu">
<ul id="menu-top">
<li id="menu-item">
<a>ITEM 1</a>
</li>
<li id="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li id="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
To target the padding on the element, I have to use #top-menu ul > li#current-menu-item > a
So if I wanted to target the 3rd element in this example, what code would I use? Is this even possible, or am I trying to be too specific? I'm hoping some combination of child and descendant selectors, but I'm not sure how I can make it all work together. Thanks for your help!
Usually in situations like this I resort to a bit of jQuery. With jQuery, you can use next() to get the li after the one you've targeted.
First, you've mixed up ids and classes. You need to be using classes here (ids cannot be repeated):
<nav id="top-menu">
<ul id="menu-top">
<li class="menu-item">
<a>ITEM 1</a>
</li>
<li class="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li class="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
Then this would give you the li after the current one:
$('.current-menu-item').next()
So you could do something like add another class to it (obviously my class name is waaaayyy longer than it really needs to be!):
$('.current-menu-item').next().addClass('the-one-after-the-current-menu-item');
Which you could then style via css.
.the-one-after-the-current-menu-item { // styling here.... }
Yes, the "+" in CSS selects the element after whatever. In this case, something like this:
#current-menu-item + li {
background: red;
}
Although, you may have another problem in that you can't use spaces in IDs. If the IDs in your example were classes instead, you'd be completely fine.
as pointed out by russtuck91, that current-menu-item needs to be a class, then his answer is the one i would implement, it is the cleanest.
however if you cant change that (which you have to as you cant have spaces in id's), you can use :nth-child(x) where x is the number of child elements down:
#top-menu li:nth-child(3) a {
color:red;
}
will still recommend russtuck91's answer though