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"
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
Need to target each element that has specific class starting with depth-
I tried targeting with CSS:
[class^="depth-"] {
margin-left: 40px;
}
but it works only when targeted class is the first in classes order.
In my case:
<div class="comment byuser comment-author-admin odd alt depth-2 parent" id="comment-13">
<div id="div-comment-13" class="media">
...
</div>
<div class="comment byuser comment-author-admin even depth-3" id="comment-14">
<div id="div-comment-14" class="media">
...
</div>
</div>
</div>
The CSS [attribute^="value"] Selector will only work when the entire style attribute value starts with given value. If you want to use this selector, then you will have to move the depth-2 and depth-3 classes at the beginning of the attribute as below -
<div class="depth-2 comment byuser comment-author-admin odd alt parent" id="comment-13">
<div id="div-comment-13" class="media">
TXT HERE
</div>
<div class="depth-3 comment byuser comment-author-admin even" id="comment-14">
<div id="div-comment-14" class="media">
MORE HERE
</div>
</div>
</div>
It would not be a good idea to do this. Instead of this, you can use CSS [attribute*="value"] Selector which searches for given value throughout the attribute. So, your css code will look like this without changing the html -
div[class*="depth-"]{
margin-left: 40px;
}
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>
Here is the html I am working with. I want to write a css selector for the Item with text "DESIRED ELEMENT":
<div class="TopDiv">
<div class="container">
<div class="row">
<div class="span2">
<strong>Text1</strong>
</div>
<div class="span3">Text2</div>
<div class="span2">
<strong>Text3</strong>
</div>
<div class="span3">DESIRED ELEMENT</div>
</div>
<div class="row">
<div class="span2">
<strong>Text4</strong>
</div>
<div class="span3">Text5</div>
<div class="span2">
<strong>Text6</strong>
</div>
<div class="span3">
<div>Text7</div>
<div>Text8</div>
<div>Text9</div>
<div>Text10</div>
<div>Text11</div>
<div>Text12</div>
<div>Text13</div>
</div>
</div>
</div>
</div>
I am having a lot of trouble getting to the div that that I want because I don't completely understand the nth-child of type this or that or getting a child of a child.
I just want something that is nice and short that will retrieve the 4th div tag child of the first row after container.
The selector depends on if that is the order your elements are always in?
Anyway, you could use:
.row:first-child > .span3:last-child
This will select the last element with the class .span3 which is a child of the first .row.
jsFiddle here.
If you want to support last-child in IE8 and before, there is always Selectivizr.
One selector that should work in IE7/IE8 could be .row:first-child > .span3 ~ div.span3.
Only use this though if there are exactly two elements inside a row with the .span3 class.
jsFiddle here.
If it's not the last, but always the fourth, use .row:first-child > div:nth-child(4).
jsFiddle here.
the 4th div tag child of the first row after container.
The css translation of that will be:
after container
.container >
of the first row
.row:first-child >
the 4th div tag child
div:nth-child(4)
so in one line:
.container > .row:first-child > div:nth-child(4)
find the container class and in childs find the first row class and inside find the 4th div tag.
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