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/
Related
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>
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>
I have something like this and I need to skip first element "comment-id-1" to remove border-style on the next element "border-style". I tried to write, but it doesn't work. Is there some regex rules for css? How can I do this?
.comments-list:not(:first-child)
<div id="comments-list">
<ol class="comments-tree-listan">
<div id="comment-id-1">
<div class="border-style">
<div class="com_info">
<span class="name">Fedor</span></div>
<div class="text">
<div id="comm-id-1"><p>Some text</p></div></div>
</div>
</div>
<div id="comment-id-2">
<div class="border-style">
<div class="com_info">
<span class="name">Validim Puten</span></div>
<div class="text">
<div id="comm-id-2"><p>Text</p></div></div>
</div>
</div>
<div id="comment-id-3">...
</ol>
</div>
[id^="comment-id-"] will give you all id start with the string.
> will get the immediate child after (only one level down)
div[id^="comment-id-"]>.border-style {
border: 1px solid red;
}
<div id="comments-list">
<ol class="comments-tree-listan">
<div id="comment-id-1">
<div class="border-style">
<div class="com_info">
<span class="name">Fedor</span></div>
<div class="text">
<div id="comm-id-1"><p>Some text</p></div></div>
</div>
</div>
<div id="comment-id-2">
<div class="border-style">
<div class="com_info">
<span class="name">Validim Puten</span></div>
<div class="text">
<div id="comm-id-2"><p>Text</p></div></div>
</div>
</div>
<div id="comment-id-3">...
</ol>
</div>
I made my site layout by using layzilla like this.
<div class="content">
<div class="top_block header">
<div class="content">
</div>
</div>
<div class="background right-sidebar">
</div>
<div class="right_block right-sidebar">
<div class="content">
</div>
</div>
<div class="background middle-sidebar">
</div>
<div class="right_block middle-sidebar">
<div class="content">
<div class="top_block middle-sidebar-up">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background left-sidebar">
</div>
<div class="right_block left-sidebar">
<div class="content">
<div class="bottom_block left-sidebar-down">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background container">
</div>
<div class="center_block container">
<div class="content">
</div>
</div>
</div>
It works well except sidebar is too long.
And I use this with AngularJS and uiRouter like this.
It doesn't work when sidebar is too long, the layout is broken.
How about using the css max-height:100vh;
This sets the maximum height to 100% of the viewport heigth.
Like this:
<div class="background left-sidebar" style="max-height:100vh">
If that would be too much, you could use 99vh instead.
Also, have you thought about using Bootstrap to lay out your page?
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.