CSS3 div and last-child - how aright? - css

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.

Related

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();

CSS grid inside another CSS grid displaying like parent grid

I am trying to create a css grid inside another css grid look like it's parent grid. The size of the inner grid is smaller by 20 and 100 pixels but it won't align like the parent grid. Please check out the codepen. Thank you.
CODEPEN: https://codepen.io/centem/pen/oNvZLgP?editors=1100
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>

Replace the class inner-grid with the inner-grid-page. No CSS is defined for inner-grid class but I can see grids defined for inner-grid-page. Let me know if it works
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid-page">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>

How to target the first occurrence of an element in the parent container by using 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.

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.

css reaching another element

can you help me reaching .form class on .right class hover?
I've alredy tried + and ~, but probably I'm doing something wrong.
Here's the code:
<div id="searchForm">
<div id="typeSelector">
<div class="left"><img src="images/left_arrow.png"></div>
<div class="middle"><img src="images/typeSelector.png"></div>
<div class="right"><img src="images/right_arrow.png"></div>
</div>
<div class="transform3D">
<div id="one" class="form"></div>
</div>
<div class="transform3D">
<div id="two" class="form"></div>
</div>
<div class="transform3D">
<div id="three" class="form"></div>
</div>
<div class="transform3D">
<div id="four" class="form"></div>
</div>
</div>

There is a solution if you can get rid of your #typeSelector div.
Then with the "sibling" selector ~
.left:hover ~ .transform3D #one
But I'm not sure it is working in every browsers.
http://jsfiddle.net/NeekGerd/HHtef/

Resources