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>
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>
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'm trying to arrange a div like this but can't get it to work.
What I'm getting is this
My thought was to keep the image in its own column and then split the other columns into smaller rows and insert there but that doesn't seem to work. Here's my code:
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="row d-flex w-100 justify-content-between products-div">
<div class="col-sm-1">
<img [src]="prod.imagePath" class="product-page-images">
</div>
<div class="row">
<div class="col-sm-10">
<h3 class="mb-1">{{prod.name}}</h3>
<p class="products-price-text">${{prod.price}}</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<h5 class="mb-1">{{prod.seller}}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<p class="mb-1">{{prod.description}}</p>
</div>
</div>
</div>
</a>
HTML
<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
<div class="img-con">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="clearfix">
<div class="pull-left">
<h3>Name</h3>
<small>Seller</small>
</div>
<div class="pull-right">
<h3>Price</h3>
</div>
</div>
</div>
<div class="col-md-12">
<div class="desc">
description
</div>
</div>
</div>
</div>
</div>
</div></div>
css
.main-container
{
border:1px solid ;
}
.img-con
{
height:100%;
width:100%;
}
.img-con img
{
max-width:inherit;
max-height:inherit;
height:100%;
width:100%;
}
.desc
{
border:1px solid;
}
reference link
and style accordingly.. hope this helps
here's my markup:
<style>
a.item
{
border:1px solid #aaa;
background:#ddd;
padding:10px;
display:block;
}
span.price
{
display:block;
text-align:center;
background:#555;
color:white;
}
</style>
<div class="main">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
</div>
</div>
it looks fine - like this:
the problem however is - when decreasing the browser window's width, it will destroy the layout and will look like this:
"image" and price are not side-bye-side anymore .. any ideas what's wrong with my code?
thanks
Include col-xs-6 next to col-md-6.
https://jsfiddle.net/gqmarfkh/ jsFiddle - I changed 2 of them as an example.
If you change .col-md-6 to col-xs-6 it should solve your problem. The class col-md-6 has no value untill the screen size is medium and up. Class col-xs-* will have a value from x-small and up. Check out this link: http://getbootstrap.com/css/#grid-options
I would like to make a small, two-column menu with bootstrap. The idea is to have a div that is 200px by 300px high. The structure would, I think, look like this:
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.menu{
width:200px;
height: 300px;
background-color:green;
}
.filterEl{
position: relative;
height:40px;
border: solid black 2px;
}
The issue is that everything gets mashed to the upper left corner of the menu div. How can I get everything evenly spaced in the meny div as if I were using Bootstrap on a full page?
From your example, I think you want the span2 div to actually be your row-fluid as well:
<div id="menu">
<div class="container">
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
See this jsfiddle for a demo.
Parent of every column should be a row.
So, try below structure.
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Reference