Why is my code not working as intended? background-color of the first article must be green. How I can do it without classes or id? P.S. I'm sorry but my post needs more text. I'm sorry but my post needs more text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>stack</title>
<link rel="stylesheet" href="css/style_new.css">
</head>
<body>
<section>
<h1>This is H1 header</h1>
<article>
<p>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</article>
</section>
</body>
</html>
CSS code:
section article:first-child {
background-color: green;
}
section article:last-child {
background-color: red;
}
Actually first child of section tag is h1 not article. So use below code instead,
section article:first-of-type {
background-color: green;
}
article is not the first-child of section - its h1
the first/last child selector does only target if article is the first or last child of its container.
possible css:
section article{
background-color:green;
}
section article + article{
background-color:transparent;
}
section article:last-child {
background-color: red;
}
see http://jsfiddle.net/rn4wgho2/
![enter image description here][1]
h1 required to remove the plug out of the section
This is H1 header
<article>
<p>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</article>
</section>
Related
I hope YOU guys are doing good
I have just started learning Flexbox from CSS Tricks and some YT channels.
But when I used justify-content:space-around | space-between | space-evenly. None of them seems to work out.
And I could not find out the problem.
I would really appreciate if anyone can help me out.
.container-1 {
display: flex;
flex-direction: row-reverse;
// flex-wrap: wrap;
justify-content:space-between;
}
<html>
<body>
<div class="container-1">
<div class="item-1">
<h1>
Box One
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="item-2">
<h1>
Box Second
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="Item-3">
<h1>
Box Third
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</body>
</html>
Given this HTML:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
</div>
I would like a nice dingbat in place of very last horizontal rule, and a blank line for the first one.
However, consider this HTML:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Here, there should be a blank line for the hr, and no dingbat.
I was thinking I would put the dingbat in the content after each hr, then remove the content for any HR followed by a p:
hr {
border: 0;
text-align: center;
}
hr::after {
content: "❧"
}
hr::after + p {
content: "";
}
That last rule, of course, doesn't work. :)
How do I set the ::after content only when followed by a p? Or, is there a way to select only the last occurrence of the hr if it has no following element?
Someone will point out to you, correctly, that there is no previous sibling selector, but you don't need one for this.
You can simply apply the dingbat to hr only when it's the last child like so:
div {
margin-bottom: 1em;
border: medium solid;
padding: 0 0.5em;
}
hr {
border: 0;
text-align: center;
}
hr:last-child::after {
content: "❧"
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
</div>
You can simplify and only consider the p element without hr:
Not for the last
p:not(:last-child)::after {
content: "❧";
display:block;
text-align:center
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Only for the last:
p:last-child::after {
content: "❧";
display:block;
text-align:center
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
I want to make a responsive grid of columns just like in this picture. That's what I want it to look like in desktop mode.
In the mobile mode, I want it to shrink and stack on top of each other when I resize the browser.
How do I do this?
Here's my code:
.help-icons {
height: 10rem;
width: 10rem;
}
.icon-one,
.icon-two,
.icon-three,
.icon-four,
.icon-five,
.icon-six {
border: 1px solid $color-silver;
}
.dark-text {
font-size: 0.7rem;
}
.light-text {
color: $color-boulder;
font-size: 0.5rem;
}
.help-icons
.icon-one
span.wfs-pie-chart
p.dark-text Some Text
p.light-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.icon-two
span.wfs-user
p.dark-text Some Text
p.light-text Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.
.icon-three
span.wfs-git-branch
p.dark-text Some Text
p.light-text Mauris nunc congue nisi vitae suscipit tellus mauris a diam.
.icon-four
span.wfs-database
p.dark-text Some Text
p.light-text Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum.
.icon-five
span.wfs-trending-up
p.dark-text Some Text
p.light-text Egestas sed sed risus pretium quam vulputate dignissim suspendisse in.
.icon-six
span.wfs-cloud
p.dark-text Some Text
p.light-text Proin fermentum leo vel orci porta non pulvinar neque laoreet.
Thanks!
EDIT: I have media queries for the mobile, tablet, and desktop already:
//- Mobile
#media screen and (min-width: 15rem){
}
// Tablet
#media (min-width: 768px) {
}
// Desktop
#media (min-width: 1280px) {
}
hope this would be useful.
.help-icons {
width: 100%;
}
.help-icons > div {
width: 10rem;
float: left;
margin-left: 10px;
}
.icon-one,
.icon-two,
.icon-three,
.icon-four,
.icon-five,
.icon-six {
border: 1px solid $color-silver;
}
.dark-text {
font-size: 0.7rem;
}
.light-text {
color: $color-boulder;
font-size: 0.5rem;
}
<div class="help-icons">
<div class="icon-one">
<span class="wfs-pie-chart"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-two">
<span class="wfs-user"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-three">
<span class="wfs-git-branch"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-four">
<span class="wfs-database"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-five">
<span class="wfs-trending-up"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-six">
<span class="wfs-cloud"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
You can make use of Bootstrap's row and column classes. This way it is not necessary for any media queries as Bootstrap does it all for you. Just make sure you have Bootstrap installed in your project, then you can make use of the following code in your html:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-sm-4">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-sm-4">
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
</div>
You can check out Bootstrap's documentation for different screen size breakpoints: https://getbootstrap.com/docs/4.1/layout/grid/. You can also change the width and height of rows and columns to your liking, by targeting the Bootstrap classes or adding custom classes to the Bootstrap classes.
I would like the following floated divs to line up vertically: The 4th div of class "box1"
should start at the bottom (after 5px margin) of the div that is above it, not at the bottom of the lowest div in the entire upper row, same for the following divs.
how can i do that with css.
(floating is not a must if there is another way to achieve this with css only)
fiddle
html:
<div id="conainer">
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing eli
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicin
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
</div>
</div>
css:
#conainer {display:block;}
.box1 {width: 31%; display:inline-block; border: thin solid black; margin:5px; float:left;}
CSS by itself may be extremely hard to set up rules like that to work with. However, if you know which boxes are going to be aligned on top of which boxes, then you could set up columns like so:
<div id="conainer">
<div class="column">
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing eli
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicin
</div>
</div>
<div class="column">
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div class="column">
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
</div>
</div>
</div>
Then, apply the CSS to each column to float left, while the boxes inside of it float to the bottom.
#conainer {
display:block;
}
.column {
width: 31%;
display:inline-block;
float:left;
}
.box1 {
border: thin solid black;
margin:5px;
float: bottom;
}
Example fiddle
Also, depending on what you're trying to achieve, equal height divs may help solve your problem. Example fiddle
Here is my markup:
<div id="why-us">
<span class="heading">Why Us?</span>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Here is my CSS:
#why-us { float: left; }
#why-us span.heading { font-size: 13pt; color: #3A3A3A; display: block; }
#why-us div.section { float: left; width: 400px; margin-right: 50px; }
#why-us div.section p { font-size: 9pt; }
How can I make it only apply margin-right: 50px; to each div.section EXCEPT for the last one? Can this be done in pure CSS only? I don't ideally want to specify a ".last" class, nor use pseudo classes as the site needs to work in all browsers.
EDIT: Is there any nicer way of doing this? As I am now generating the code using PHP, which means I have to add extra code to make it check for the last DIV. I know that isn't too bad but still I would prefer a more elegant solution :)
You could override the CSS in the last div, as in:
<div id="why-us">
<span class="heading">Why Us?</span>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="section" style="margin-right: 0px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
It's really ugly but I think it should work.
You could use child selectors as follows:
#why-us div.section:last-child{
margin-right:0;
}
Example: http://jsfiddle.net/Br2DG/