CSS how to refer to last div within multiple divs - css

I have the following HTML:
<div class="test">
<div class="inner">
<div class="pure-g">
<div class="pure-u-1-4">
<div class="spec__test">
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">
</div>
</div>
</div>
</div>
</div>
How can I possibly refer to ONLY the last spec__test div using CSS?


use :last-child
see: see: http://www.w3schools.com/cssref/sel_last-child.asp
.pure-g .pure-u-1-4:last-child .spec__test{
background-color:red;
}
<div class="test">
<div class="inner">
<div class="pure-g">
<div class="pure-u-1-4">
<div class="spec__test">123
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">123
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">123
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">123
</div>
</div>
</div>
</div>
</div>


:last-of-type
.pure-g .pure-u-1-4:last-of-type {
background-color:red;
}
<div class="test">
<div class="inner">
<div class="pure-g">
<div class="pure-u-1-4">
<div class="spec__test">123
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">123
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">123
</div>
</div>
<div class="pure-u-1-4">
<div class="spec__test">123
</div>
</div>
</div>
</div>
</div>

Related

How to get element with same data-attr on all site with only css?

There is a task - to randomly find an element with a date-attribute on a site with a large nesting. This task I should do only with CSS, without JS (maybe some compile from SASS or LESS). Someone has an idea how to find any block with [data-some="true"]? Can you help me? please?
<div id="parent">
<div class="row-1">
<div class="child-first></div>
<div class="child-second>
<div data-some="true"></div>
<div data-some="true"></div>
<div data-some="true"></div>
</div>
<div>
<div class="row-2">
<div class="child-first></div>
<div class="child-second>
<div data-some="true"></div>
<div data-some="true"></div>
<div data-some="true"></div>
</div>
<div>
...
<div class="row-n">
<div class="child-first></div>
<div class="child-second>
<div data-some="true"></div>
<div data-some="true"></div>
<div data-some="true"></div>
</div>
<div>
</div>

You was very close and can use [data-some="true"] directly as CSS selector:
[data-some="true"] {
color: red;
}
<div id="parent">
<div class="not_nested">
<div data-some="false">test</div>
<div data-some="true">test</div>
<div data-some="true">test</div>
</div>
<div>
<div class="row-2">
<div class="nested">
<div data-some="true">test</div>
<div data-some="false">test</div>
<div data-some="true">test</div>
</div>
</div>
<div class="row-n">
<div class="child-first"></div>
<div class="child-second">
<div class="deeper_nested">
<div data-some="true">test</div>
<div data-some="true">test</div>
<div data-some="false">test</div>
</div>
</div>
</div>
</div>
</div>

How to correctly position vertical oriented text on a div?

I have a table made by divs on bootstrap. I want on the first column the text be vertical (orientation -90deg). I was able to successfully turn the text but, if the the text is longer, it looses the position.
It always show up like on this screenshot: https://ibb.co/2s8dzyZ
I have tried several techniques found on the web but none seems to solve my problem.
.horizontal-pricing {
min-height: 250px;
position: relative;
}
.verticaltext {
transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin: right, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: right, top;
position: absolute;
font-family: 'Montserrat-SemiBold', sans-serif;
font-size: 20px;
color: #3c99ef;
margin-top: 100px;
}
<div class="container purple-accent">
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Professional 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Professional 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Performance 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Performance 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
I want the text be vertically aligned on the middle of the white box and 20px from the left side.

Use writing-mode
.verticaltext {
writing-mode: vertical-lr;
transform: rotate(-180deg);
}
.row {
border: 1px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container purple-accent">
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Professional 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Professional 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Performance 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Performance 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
Codepen Demo

Do you really want to have <div class="col-sm-4 col-md-4"><div> closed without content, and then have <div class="pricing-box horizontal-pricing">closed after <div class="verticaltext">Light 1</div> and after that already close the row??
<div class="container purple-accent">
<div class="row">
<div class="pricing-box horizontal-pricing">
//THINK ABOUT THIS PART OUF YOUR CODE
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 1</div>
</div>
</div>
By your formatting I think this would be more of what you want:
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div class="verticaltext">Light 1</div>
</div>
</div>
more div's inside row here

Best approach to divide Bootstrap grid columns

I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?

Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>

You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>

Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>

You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.

Border layout with bootstrap

Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?
New to bootstrap, but even with the help of google I just came up with this:
div class="container">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
<div class="col-xs-12">
<div class="bottom-box">bottom</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
https://jsfiddle.net/fbtw6/352
The result is not very convincing - what am I doing wrong?

See it this works for you.
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>sticky footer</p>
</div>
</footer>
I used this example to assemble.
Like this any better?

how to adjust the column width in bootstrap based in container?

i am creating the layout something like this :
[my layout on paper][1]
but from html and using bootstrap i got following like this :
http://jsfiddle.net/52VtD/7352/
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
<%--<div>
<span class="verticaltextname1">Project</span>
</div>
<div>
<span class="verticaltextname1">Work History</span>
</div>--%>
</div>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-xs-3">
<div class="topBox">About me</div>
</div>
<div class="col-xs-3">
<div class="topBox">Specialization</div>
</div>
<div class="col-xs-3">
<div class="topBox">Awards</div>
</div>
<div class=" col-xs-3">
<div class="topBox">Testimonials</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="topBox">Project</div>
</div>
<div class="col-xs-3">
<div class="topBox">Description</div>
</div>
<div class="col-xs-3">
<div class="topBox">Achievements</div>
</div>
<div class="col-xs-3">
<div class="topBox">Clients</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
WorkedAs
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Skills
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
Responsibilities
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Work involved
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
</div>
</div>
</div>
</div>
http://jsfiddle.net/52VtD/7352/
how can i adjust the greenyellow column as per my paper starch, and create the same space between each box?

Resources