I'm trying to select the div that has "Trying to access this element"
<div id="main" class="wrapper clearfix 3-column">
<div id="col1" class="floatleft">
<div><img src="img/main.jpg" /></div>
<div class="col1-grid2">
Trying to access this element
</div>
</div>
</div>
Doing .col1-grid2 or #main .col1-grid2 works as expected. However, why would doing .3-column .col1-grid2 not target the element?
The problem is not the selector, it's the name of the class. 3-column is not a valid class name. It must start with a -, _ or a letter (a-z or A-Z). EDIT: updated to say not just lower case letters
Related
How to select a specific child by className in Tailwind?
I have tried some selectors but it seems nothing is matching, is it even possible?
<div className="[CHILD_CLASSNAME]:bg-red [NESTED_CHILD_CLASSNAME]:bg-blue">
<div className="CHILD_CLASSNAME">
text in red
<div className="NESTED_CHILD_CLASSNAME">text in blue</div>
</div>
<div>
note: I can't style directly child component with CHILD_CLASSNAME
Arbitrary variants should contain & sign - it points on current element with this variant class
<div class="[&_.CHILD-CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500">
<div class="CHILD-CLASSNAME">
text in red
<div class="NESTED-CHILD-CLASSNAME">text in blue</div>
</div>
<div>
&_.CHILD-CLASSNAME simply will point on every element within as in regular CSS. You can use any CSS selector
Please note: if your class contains _ in the class name, it should be escaped with \ - otherwise Tailwind will consider it as a space
<div class="[&_.CHILD_CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500">
<div class="CHILD_CLASSNAME">
text in red (not working because of "_")
<div class="NESTED-CHILD-CLASSNAME">text in blue</div>
</div>
<div>
<div class="[&_.CHILD\_CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500">
<div class="CHILD_CLASSNAME">
text in red
<div class="NESTED-CHILD-CLASSNAME">text in blue</div>
</div>
<div>
DEMO
On this particular website, i'm trying to make a query selector to get all the itens inside the div with id='plans-tab'. Here's what i've got so far:
document.querySelector('#plans-tab .row .small-12.columns:nth-child(1)')
It gets me the first item. But if i try to make
document.querySelector('#plans-tab .row .small-12.columns:nth-child(2)')
It returns null. Inside that tab, there's about 14-15 items, so it should've worked. What am i doing wrong here??
If the site asks for a zip code, just type 51030560, and it's good to go
Edit: here's a jsfidle with some more html code: https://jsfiddle.net/gz1ht2to/1/
First of all your website doesn't have the div with the id "#plans-tab", but if I am getting your question right then this might be the solution that you are looking for:
This is just the dummy HTML:
<div id="plans-tab">
<input>
<button>
Click
</button>
<input>
<div>
</div>
</div>
<div id="html-to-display">
</div>
This is the jQuery that I used:
var variable = $("#plans-tab");
$("#html-to-display").text(variable.html());
I hope this helps.
Your selector: #plans-tab .row .small-12.columns:nth-child(2) finds the first element that is a 2nd child, has class "small-12" and "columns" that is a descendant of an element with class "row" that is a descendant of an element with id "plans-tab".
Paraphrased from your jsfiddle:
<div id="plans-tab"> <---- "#plans-tab"
<div class="hidden" id="current_plan">
<div class="row"> <---- " .row"
<div class="small-12 columns"> <---- " .small-12.columns:nth-child(1)"
<h2>Escolha o seu plano</h2>
<!-- ngRepeat: planMember in plans -->
<div data-ng-repeat="planMember in plans" class="ng-scope">
<div class="plan-container small-12 columns selected" data-ng-class="{"selected": plan.id == planMember.id}" data-ng-hide="isPortabilityPrePlan(planMember)">
I think what you wanted was this: #plans-tab .row .small-12.columns :nth-child(2), which is the first element that is a 2nd child and is a descendant of an element that has class "small-12" and "columns" that is a descendant of an element with class "row" that is a descendant of an element with id "plans-tab".
<div id="plans-tab"> <---- "#plans-tab"
<div class="hidden" id="current_plan">
<div class="row"> <---- " .row"
<div class="small-12 columns"> <---- " .small-12.columns"
<h2>Escolha o seu plano</h2>
<!-- ngRepeat: planMember in plans -->
<div data-ng-repeat="planMember in plans" class="ng-scope"> <---- " :nth-child(2)"
<div class="plan-container small-12 columns selected" data-ng-class="{"selected": plan.id == planMember.id}" data-ng-hide="isPortabilityPrePlan(planMember)">
Only difference is the space, which has semantic value. "x:y" == "an x that is a y". "x :y" == "an x that has a y"
<div id='test' /><div>
In the above example, I need to find div under below scenario:
WebElement
divelement = driver.FindElement(By.css("#test"));
Now I want to find the div tag with no attribute using the divelement variable.
How to navigate to div descendant using divelement?
There are a couple ways you can do this.
By using a CSS Selector:
driver.findElement(By.cssSelector("#test div"))
// ^ note the space. this is CSS for "descendant".
I'm confused by the phrasing of
find the div tag with no attribute using the divelement variable.
but if you mean a <div> element with no specific attributes, then you can use the :not() pseudo-selector.
driver.findElement(By.cssSelector("#test div:not([id])")
// will find all <div>s that are descendants of #test that do not have an id attribute.
The other way, is to just use chained findElement's like so:
driver.findElement(By.cssSelector("#test")).findElements("div")
divelement.findElement(By.css("div"));
That should be the way to go. That was listed in the comment above from #Sudharsan Selvaraj
If you know the use of double slash // in Xpath and looking for its counterpart in CSS, then you need to use space.
For example: You want CSS for grey line then it will be .image .row.width-for-gray-line
<div class="image parbase wq-GridColumn wq-GridColumn--default--12">
<div class="component">
<div class="row bottom-buffer">
<div class="col-sm-12">
<a href="https://msn.com" target="_blank">
<picture>
<img src="/image/path/cover.jpg"
class="image-max-width-responsive" alt="test_alt_text">
</picture>
</a>
<p class="light-txt">test_caption</p>
</div>
</div>
<div class="row width-for-gray-line">
<hr class="bottom-buffer-gray-line">
</div>
</div>
</div>
I have the following HTML code:
<div class="t2-selector">
<div>
<div class="inactive">USA</div>
<div class="inactive">Google</div>
<div class="inactive">Microsoft</div>
<div class="inactive">Apple</div>
</div>
<div>
<div class="">Europe</div>
<div class="selected">BT</div>
</div>
<div>
<div class="">Indices</div>
<div>Vodafone</div>
<div>Renault</div>
</div>
<div>
<div class="">Currencies</div>
<div>EUR/USD</div>
<div>GBP/USD</div>
<div>USD/JPY</div>
<div>USD/CHF</div>
<div>AUD/USD</div>
<div>USD/CAD</div>
</div>
I can select a group by Xpath xpath = "//div[contains(text(),'Currencies')]"
What I need is to select a child in Currencies list by it's number.
I need something like CSS div:nth-child(2) but I can't use CSS here since CSS doesn't really support selecting an element by text.
So is there nth-child analog for Xpath?
You can use
//div[contains(text(),'Currencies')]/following-sibling::div[1]
Please note that the index starts from 1 not 0.
Check the following link : http://www.w3schools.com/xsl/xpath_axes.asp
The html markup may vary as in the following example .menu is illustrated:
<div id="main">
<div></div>
<div class="menu"></div>
<div class="menu"></div>
</div>
for this I could use .menu:last-child but if this is like this:
<div id="main">
<div></div>
<div class="menu"></div>
<div>
<div class="menu"></div> <!--- selecting this----->
</div>
</div>
Or, say like this:
<div id="main">
<div></div>
<div class="menu"></div> <!-- count as 1--->
<div>
<div>
<div class="menu"></div> <!--- selecting this-----> <!-- count as 2 ---->
<div class="menu"></div> <!-- count as 3---->
</div>
</div>
</div>
So, I want to target the .menu whether it is parent, children or siblings anything but lastly marked up html or say like nth-of-type. Is there any idea for this?
I mean I want as the type of the class name.
The nth-of-type will give you the nth sibling of the same type as the selected element.
This should be used when you are dealing with different element types in the same parent, and you want to select the 1st/last or nth element of a specific type only.
Unfortunately there isn't any such pseudo-class to select a specific element(At a particular position) in the sequence of the elements with the same type in the context of the whole BODY of the document. Hence in this particular set of examples you cannot select the 2nd of all the elements with the same specification i.e. in this case with class=menu in the context of the whole document but it is possible with all such elements under a single level of the object hierarchy of the DOM tree i.e. under a single parent.
So the only way is through JS:
Code
<script>
onload=function()
{
obj=document.getElementsByClassName('menu')[1];//index=1 to access the 2nd object
/*
Do something with 'obj'
*/
}
</script>