I have this HTML and CSS. I expect the nth-child will select "Test2" and "Test3" because the previous selector already filters out the "Nothing" element.
If I remove the :nth-child(n+2):nth-child(-n+3), the result selects Test1, Test2, Test3, Test4 (except Nothing). It's correct.
If I remove the :has(> div[role='article']), the result selects "Test1" and "Test2". It's correct.
Why doesn't nth-child combine with the previous selector? How can I fix it?
.container[role='feed'] > div:has(> div[role='article']):nth-child(n+2):nth-child(-n+3) {
background: green;
}
<div class="container" role="feed">
<div>
<div role="nothing">
Nothing
</div>
</div>
<div>
<div role="article">
Test1
</div>
</div>
<div>
<div role="article">
Test2
</div>
</div>
<div>
<div role="article">
Test3
</div>
</div>
<div>
<div role="article">
Test4
</div>
</div>
</div>
Related
I need to specify that what I want (<b>19</b>, etc) is simultaneously
within class="elem" and class="main" (descending CSS combinator- space)
direct children (CSS > immediate child combinator) of class="numbers" > class="numbers_wrapper" > class="container cleared"
What is the correct way how can I combine all those 5 conditions?
I need to extract this info
<b>19</b>
<b>12</b>
<b>14</b>
<b>23</b>
<b>10</b>
from this pattern in the middle of a web page :
<div class="elem">
<div class="main">
<div class="draw_date" title="08.04.2018 21:00">08.04.2018 21:00</div>
<div class="draw">
8277
</div>
<div class="numbers">
<div class="numbers_wrapper">
<div class="container cleared">
<b>19</b>
<b>12</b>
<b>14</b>
<b>23</b>
<b>10</b>
<b class="extra">02</b>
</div>
</div>
<div class="controls">
<a class="no_visited iconic nonunderline" title="Проверить билет"
href="/5x36plus/check_bulletin">⚲</a>
</div>
</div>
<div class="prize ">
<div class="jackpot_wrapper">
<span></span>
<span>3000000
</span>
</div>
<div class="jackpot_wrapper">
<span></span>
<span>3437960
</span>
</div>
</div>
</div>
Is my guess how to do it right?
div.elem > div.main div.numbers > div.numbers_wrapper > div.container.cleared b
P.S. I am using Jsoup web scraping lib for java (like here in the middle), it grabs info from web page if I correctly specify target CSS selectors combination.
Yes, It's absolutely right. But as far as you've defined your class name differently you can also simply describe your css as .cleared b{}.
div.elem > div.main div.numbers > div.numbers_wrapper > div.container.cleared b{color: red;}
<div class="elem">
<div class="main">
<div class="draw_date" title="08.04.2018 21:00">08.04.2018 21:00</div>
<div class="draw">
8277
</div>
<div class="numbers">
<div class="numbers_wrapper">
<div class="container cleared">
<b>19</b>
<b>12</b>
<b>14</b>
<b>23</b>
<b>10</b>
<b class="extra">02</b>
</div>
</div>
<div class="controls">
<a class="no_visited iconic nonunderline" title="Проверить билет"
href="/5x36plus/check_bulletin">⚲</a>
</div>
</div>
<div class="prize ">
<div class="jackpot_wrapper">
<span></span>
<span>3000000
</span>
</div>
<div class="jackpot_wrapper">
<span></span>
<span>3437960
</span>
</div>
</div>
</div>
If I have this HTML code:
<div class="profile-header col-sm-4">
<div class="profile-cover">
<h1>01</h1>
<div class="row">
<div class="col-sm-6">
<div class="checkbox checkbox-primary">
...
</div>
</div>
<div class="col-sm-6">
<div class="btn-group">
...
</div>
</div>
</div>
</div>
</div>
How can I select the div.checkbox in CSS ?
I tried:
.profile-cover > .checkbox
I do not want to be too large by selecting .checkbox.
Thanks.
A > B only selects a child (direct descendant), so it sounds like you just need:
.profile-cover .checkbox
Which means .checkbox anywhere inside .profile-cover.
sorted in descending order of accuracy (all will hit your targeted element):
.profile-header>.profile-cover>.row>.col-sm-6>div.checkbox,
.profile-header>.profile-cover>.row div.checkbox,
.profile-header>.profile-cover div.checkbox,
.profile-header div.checkbox,
.profile-cover div.checkbox
I am trying to target the first occurrence of .discount class but some how its not working. I am trying .discount:first-child but its targeting all the .discount class inside the .container class.
Any one has idea how can I target only the first .discount class element inside the .container element?
My HTML code looks like this
<div class="container">
<div class="wrapper">
<div class="some-class">
Product
</div>
<div class="some-class">
Discount
</div>
</div>
<div class="wrapper">
<div class="product">
Product 1
</div>
<div class="discount">
$1
</div>
</div>
<div class="wrapper">
<div class="product">
Product 2
</div>
<div class="discount">
$5
</div>
</div>
<div class="wrapper">
<div class="product">
Product 4
</div>
<div class="discount">
$10
</div>
</div>
</div>
why you dont put another class inside the div you want. like this http://jsfiddle.net/8L0un657/
<div class="wrapper">
<div class="product">
Product 1
</div>
<div class="discount selected">
$1
</div>
</div>
Try this
.wrapper:nth-child(2) > .discount:nth-child(2)
This selects the wrapper class which is the 2nd child of its parent (i.e. container)and then selects the discount class which is the second child of its parent i.e. wrapper div.
JsFiddle
But you can also use 'id' to reference any particular element.
How can I match the first div except if the first div is div.error?
<div>
<div class="error">
<p>Error 1.</p>
<p>Error 2.</p>
</div>
<div> <!--I want to tag this-->
Content
</div>
<div>
Content
</div>
<div>
Content
</div>
</div>
My attempts:
div > div:first-of-type:not(.error) {color:red}
div > div[class]:not(.error):first-of-type {color:red}
The div.error could appear or not (depending if there are errors or not), so I can't use something like nth-of-type(2)
You can use combination of two selectors. Check the demo to test both situations:
div > div.error:first-of-type + div,
div > div:not(.error):first-of-type {
color: red;
}
<div>
<div class="error">
<p>Error 1.</p>
<p>Error 2.</p>
</div>
<div><!-- Should match this-->Content</div>
<div>Content</div>
<div>Content</div>
</div>
<hr>
<div>
<div><!-- Should match this -->Content</div>
<div>Content</div>
<div>Content</div>
</div>
.main div:first-child:not(.error),.main div.error+div{color:red;}
<div class="main">
<div class="error">
<p>Error 1.</p>
<p>Error 2.</p>
</div>
<div> <!--I want to tag this-->
Content :: red
</div>
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="main">
<div> <!--I want to tag this-->
Content :: red
</div>
<div>
Content
</div>
<div>
Content
</div>
</div>
CODE:
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
I would like make that last div, LeftDiv, get CSS display:none.
For it I use code: div.AllDiv .LeftDiv .LeftDiv2:last-child{display:none;}, but it is not working.
Also i try use i usediv.AllDiv:last-child div.LeftDiv .LeftDiv2{display:none;}, but it not work too.
Tell me please where error and how write it correctly?
LeftDiv2 is the first child if it's parent element, not the last child. However, you don't need the last child class at all. just remove :last-child. If you really wanted to select it using the pseudo class you would want :first-child in your current markup.