How to target the first occurrence of an element in the parent container by using css? - css

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.

Related

How do I select every instance of a class on a page, but not the first instance - regardless of parent?

I want to set every div with the class="wp-block-column" to 'display:none;' --> but not the first one.
I am having trouble :not selecting the first div with the class="wp-block-column"
BOTTOM LINE: I want to select all divs with the class="wp-block-column" throughout the page regardless of where they land or who their parent is --> but not the first instance. I want to select instances from the body, not a parent div.
<div class="menu-column"> only appears inside <div class="seventy-thirty-block"> but there could be 1 or 5 of these blocks, they are generated from a loop.
There could also be any number of blocks that are not <div class="seventy-thirty-block">before.
The css on this page works because :not(:nth-child(2) gets the second child of <div class="singleBlogContent">
But if I uncomment
<!--
<div class="callout-full-block">
</div>
-->
then it no longer works because now it's :not(:nth-child(3)
Here is the JS Bin:
https://jsbin.com/xowefaj/edit?html,css,output
The output that I want in the JS Bin is:
content
menu
content
content
This is my html:
<div class="singleBlogContent">
<div class="callout-full-block">
</div>
<!-- <div class="callout-full-block">
</div> -->
<div class="seventy-thirty-block">
<div class="container">
<div class="seventy-thirty-columns">
<div>
<div>
content
</div>
</div>
<div class="wp-block-column">
<div class="menu-column">
menu
</div>
</div>
</div>
</div>
</div>
<div class="seventy-thirty-block">
<div class="container">
<div class="seventy-thirty-columns">
<div>
<div>
content
</div>
</div>
<div class="wp-block-column">
<div class="menu-column">
menu
</div>
</div>
</div>
</div>
</div>
<div class="seventy-thirty-block">
<div class="container">
<div class="seventy-thirty-columns">
<div>
<div>
content
</div>
</div>
<div class="wp-block-column">
<div class="menu-column">
menu
</div>
</div>
</div>
</div>
</div>
</div>
This is my css:
div.seventy-thirty-block:not(:nth-child(2)) .wp-block-column .menu-column {
display:none;
}

Assign the first one a unique class then assign it display: block; after the initial ruleset for display: none. If you want a dynamic solution, you should use JavaScript. See Figure I
Figure I
document.querySelectorAll('.wp')[0].classList.add('.first');
.wp {
display: none;
}
.first {
display: block
}
<main>
<div class='wp first'>First</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
</main>

How to click a div with certain text in a nested div using cypress?

Below is my HTML code :
<div class="main">
<div class="box">
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link1</a>
</div>
<div class="cell">type</div>
<div class="cell">description</div>
</div>
<div class="box"> //i want to click this element
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link2</a>
</div>
<div class="cell">type1</div>
<div class="cell">description1</div>
</div>
<div class="box">
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link3</a>
</div>
<div class="cell">type2</div>
<div class="cell">description2</div>
</div>
</div>
I'd like to click on the div with the class box containing the <a>link2</a> tag.
I have tried this :
cy.get(`.main>div`).contains('link2').click();
This clicks on the link element itself, but I'd like it to click the div element that contains it (the <a>link2</a> tag) instead.
Is there any way to do this?
I'm looking forward to any tips and solutions you might provide.
Thanks.

You could try getting the link2's parent element which is the div you want to click, in the following way:
cy.get(`.main>div`).contains('link2').parent().click();

I believe you can use a selector in 'contains' itself like below
cy.contains('.main>div', 'link2').click();

set style only for elements are inside a specific div

I just wanna apply my custom style into the elements which are inside a specific div. I mean there are many elements with the same class all over the page and I want only apply these custom CSS to elements are inside a div with the data attr like div data-some-feature=... and not apply to the rest
<div class="row" data-language>
<section class="posts by-tags show-grid" data-language>
<div class='right a'>a</div>
<div class="row">';
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-right">
<div class="a">
<h6>apple</h6>
<p>some text...</p>
</div>
</div>
</div>
</section>
</div>
<div class='row'>
<section .....>
......
</section>
</div>
<style>
div[data-dictionary-language].posts {
//some style
}
</style>
I want to use only div[data-dictionary-language] once and then apply my custom CSS like below:
<style>
div[data-dictionary-language]{
.tags{
//some style only apply to all elements are inside the specific div
}
.posts{
//some style only apply to all elements are inside the specific div
}
}
</style>

You were almost there, try like so:
/* ___________ select the div with data-language attribute
| ______ note the space here
| | ________ select child of div[data-language] with class posts
______|________ | __|__ */
div[data-language] .posts {
background-color: orange;
}
<div class="row" data-language>
<section class="posts by-tags show-grid" data-language>
<div class='right a'>a</div>
<div class="row">';
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-right">
<div class="a">
<h6>apple</h6>
<p>some text...</p>
</div>
</div>
</div>
</section>
</div>
<div class='row'>
<section .....>
......
</section>
</div>

Grids in box bootstrap

I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?

You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.

CSS3 div and last-child - how aright?

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.

Resources