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>
Related
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
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'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.
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.
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/