I have created 3 different sets of columns, but I want the ability to style each column differently.
<div id="container">
<div class="first">
<div class="column">Featured Work</div>
<div class="column">info</div>
<div class="column">info</div>
</div>
<div class="middle">
<div class="column">News</div>
<div class="column">middle column</div>
<div class="column">right column</div>
</div>
<div class="footer">
<div class="column">body copy 1</div>
<div class="column">body copy 2</div>
<div class="column">body copy 3</div>
</div>
this is my current code: http://jsfiddle.net/TroyAlford/Cj6dj/2/
I want to style the featured work and news columns with top and bottom boarders and to style the type. The two Info columns along with the middle and Right columns would have full boarder around it.
Would I rename each class to a unique name to achieve this effect?
You can you the :first-child selector - DEMO
#container .first div.column:first-child,
#container .middle div.column:first-child {
border-width: 1px 0;
color: #c00;
}
Related
I have a below div structure and I want to add css on first .column element, not its sibling
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
I want to add CSS only first .column that comes just after #team div. So how can I select a class for that .column not for the inner .column?
You would use the direct descendant / child combinator ">" which in effect says - target the .column class that DIRECTLY descends from the #team parent div.
In the following - I am placing a border around the targetted .column div and not around the nested children .column divs.
and if there are other divs that are siblings of that particvular div - then you could use the :first-child pseudo selector as well..
#team > .column:first-child {...}
which says - target the .column div that is a direct descendant AND the first child of the #team div.
#team > .column {
border: solid 1px red;
}
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
The most specific selector in this case is #team>.column, with > between parent and child to make sure the nested divs which also have the .column class are not affected.
#team .column would not work in this case, since it also selects the .column divs which are nested in lower instances.
BTW: You mention "siblings", which is a bit confusing, since there are not any siblings to that element...
#team>.column {
background: yellow;
}
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
Ok, so I think you may have confused your HTML 'parent/child' structure.
You could use
#team > .column:first-child {
}
However, I don't know if you are aware that you can add any number of classes to HTML elements. You could have many classes to easily distinguish between your components and to be able to grab hold of them with CSS or JS.
For the sake of ease, you could just add another class to the element you want to add another separate class style, as I have below.
Then you could just add CSS styling for that class.
<div class="row" id="team"> //this is parent
<div class="column main"> // a child that I've added the
// class of .main to
<div class="row"> // a grandchild
<div class="column"> // then great grandchildren
A //these are siblings
</div>
<div class="column"> //these are siblings
B
</div>
<div class="column"> //these are siblings
C
</div>
</div>
</div>
</div>
/*Then you would just add stylings for*/
.main {
}
Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>
i am trying to make site navigation through Bootstrap Grid system.
I want to make 3 columns with two rows with this layout:
|Title | |Login|
|Subtitle|Menu buttons| |
Code works correctly, until i set font-size for title and subtitle. Can anybody help me? Snippet: http://www.bootply.com/GLEf6MfmxE
HTML:
<header>
<div class="container">
<div class="row">
<div class="col-xs-4" id="title">Foo title</div>
<div class="col-xs-6"></div>
<div class="col-xs-2">Login</div>
<div class="col-xs-2" id="subtitle">Bar subtitle</div>
<div class="col-xs-1">Menu 1</div>
<div class="col-xs-1">Menu 2</div>
</div>
</div>
</header>
Custom CSS:
#title{
font-size: 2em;
}
#subtitle {
font-size: 1.5em;
}
you need to learn that, for the different row, you have to use another row class as you are working on two row so each column must be on their own row class like this check the following code. i am sure this code will help you to understand.
<header>
<div class="container">
<div class="row">
<div class="col-xs-4" id="title">Foo title</div>
<div class="col-xs-6"></div>
<div class="col-xs-2">Login</div>
</div>
<div class="row">
<div class="col-xs-2" id="subtitle">Bar subtitle</div>
<div class="col-xs-1">Menu 1</div>
<div class="col-xs-1">Menu 2</div>
</div>
</div>
</header>
Regards
Bootstrap's grid system allows up to 12 columns across the page, so you have to fill 12 columns for row.
Look at this: http://www.bootply.com/SRezJSXWsE
ps: As you can see I update the css too, in order to align your Login to the right.
Can I apply the first-child and last-child pseudo elements to the divs with the same class that are in different sub-containers? In the example below, div with the classes "box selected" are all stored under "1st-container", but there are 2 additional containers on the way:
<div class="1st-container">
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected"> // this div should have first-child pseudo elements
<div class="box">
</div>
</div>
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected">
<div class="box">
<div class="box">
<div class="box">
</div>
</div>
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected"> // this div should have last-child pseudo
<div class="box">
</div>
</div>
</div>
Is that doable with pure css?
You can't do what you've described, because in both cases, "box selected" is the first child of its parent. You could take a different approach, though. For example, you could target those two divs like so:
.2nd-container:first-child .selected,
.2nd-container:last-child .selected
{}
As pointed out, replace the 2 with a non-digit, as that won't work. I was distracted by the main question. :-)
Firstly, you cannot use numbers to start classes or id's.
Secondly, you just need to do a find on the first and last child of the second element in and you should be able to find the elements you need.
.box {
height: 20px;
width: 400px;
background: blue;
}
.box.selected {
background: red;
}
.two-container:first-child .box.selected,
.two-container:last-child .box.selected {
background: green;
}
<div class="one-container">
<div class="two-container">
<div class="three-container">
<div class="box selected">// this div should have first-child pseudo elements</div>
<div class="box"></div>
</div>
</div>
<div class="two-container">
<div class="three-container">
<div class="box selected"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div class="two-container">
<div class="three-container">
<div class="box selected">// this div should have last-child pseudo</div>
<div class="box"></div>
</div>
</div>
</div>
with JS it looks easier than CSS:
var selected = document.querySelectorAll('.one-container .box.selected');
selected[0].style.background = selected[selected.length-1].style.background='green';
FIDDLE
I'm using Bootstrap 3. I have two rows. The first row has 4x3 columns. The second row has one column of 3 and one column of 9. The column of 9 has twice the height of all the other columns. I would like a column added beneath the column of 3 on the second row. I have made an image to explain it.
Green is on one row and purple is on one row. I have tried to put yellow in it's own row, but then it is displayed on the left though but not against the bottom of the small purple block.
I have also put the small purple and yellow blocks on the same row but they get displayed next to each other with the 90 block underneath them.
why you don't follow this
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="col-md-12"></div>
</div>
</div>
and later you could trick it with css
The Bootstrap grid system controls column width but not height. You can achieve your desired layout with the expected grid pattern and use height rules to make the bottom edge flush.
http://jsfiddle.net/rblakeley/ruggnzvq/
<html>
<head>
<title>Bootstrap grid example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
div[class^="col"] { height: 40px; text-align: center; border: 1px dashed red; background: #fcc;}
.row:nth-child(2) div[class^="col"] { background: #cfc;}
.row:nth-child(2) > div[class^="col"]:first-child { border: none;}
.row:nth-child(2) > div[class^="col"]:nth-child(2) { height: 100px;}
.row:nth-child(2) .row div[class^="col"]:nth-child(2) { height: 60px; background: #ccf;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">3</div>
<div class="col-xs-12">3</div>
</div>
</div>
<div class="col-xs-9">9</div>
</div>
</div>
</body>
</html>