This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 3 years ago.
I'm trying to position the first text on entire row, second on half of the row and third on the other half of the row but I don't know why doesn`t work
.news-content{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,1fr);
}
.news-content.butoane{
grid-row:1/3;
grid-column:1/3;
}
.news-content.imagine{
grid-row:2/3;
grid-column:1/2;
}
.news-content p{
grid-row:2/3;
grid-column:2/3;
}
<div class="news-content">
<div class="butoane">
<button>Butonul1</button>
<button>Butonul2</button>
<p>FIRST TEXT FIRST TEXT sit amet consectetur adipisicing elit. Tenetur, ipsa! efgkermgmergmermgergmerirmg</p>
</div>
<div class="imagine">
<p> SECOND TET SECOND TEXT amet consectetur adipisicing elit. Harum deserunt perspiciatis autem aspernatur! Eum, a facilis qui maxime esse omnis consectetur tempore quisquam veritatis tenetur repudiandae, modi, fuga placeat est.</p>
</div>
<p>LAST TEXT LAST TEXT sit amet consectetur adipisicing elit. Cum, praesentium laboriosam obcaecati quae officia officiis voluptatem quia illum dicta mollitia itaque. Veniam labore quo itaque molestias quaerat, omnis cupiditate numquam!</p>
</div>
It doesnt work because of your css selectors, .news-content.butoane selects an element with those two classes, .news-content .butoane selects .butoane inside .news-content
.news-content{
display: grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,1fr);
}
.news-content .butoane{
grid-row:1/3;
grid-column:1/3;
}
.news-content .imagine{
grid-row:2/3;
grid-column:1/2;
}
.news-content p{
grid-row:2/3;
grid-column:2/3;
}
https://jsfiddle.net/wwWaldi/hy4pbnzx/1/
Related
In CSS I want to select the three first divs. I have this code:
div:nth-child(3n) {
background: red;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore laborum necessitatibus nobis obcaecati, mollitia, eos sint dolor odit. Possimus dolores recusandae sed totam, voluptatibus, voluptatum. Voluptatibus minus aut, quam ratione.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates perferendis et saepe omnis nemo, dolores quia ipsam ea blanditiis quaerat autem aut id itaque magnam recusandae sint architecto! Error, consequuntur.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti.
</div>
I try above CSS but it does not work.
It's not working as expected because :nth-child(3n) will select every third element.
You need to select every element starting from the third one counting backwards, therefore you could use -n + 3 or -1n + 3.
In other words, given the pattern an+b, a should be 1 (or omitted) since you don't want to skip over elements. In addition, a should also be negative and b should be 3 since you're starting at the third element.
div:nth-child(-1n + 3) {
background: #f00;
}
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
It's worth pointing out that div:nth-child(-1n + 3) will only select the element if it is one of the first three elements and also an element type div. In other words, if the third element is a span, only the first two div elements will be selected:
div:nth-child(-1n + 3) {
background: red;
}
<div>First div</div>
<div>Second div</div>
<span>Span</span>
<div>Third div</div>
If the element types vary (like above), then you should use :nth-of-type() instead:
div:nth-of-type(-1n + 3) {
background: red;
}
<div>First div</div>
<div>Second div</div>
<span>Span</span>
<div>Third div</div>
I have this css and its working fine the text appears at right and is aligned.
However the same code of that fiddle in a pdf, the text is apeparing like this (like the example at right, at left is how it should display):
Do you know what can be the issue?
.container {
display: flex;
}
.span {
margin-right: 5px;
}
<div class="container">
<span class="span">1.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vel aut quidem consequatur quaerat optio ab! Iste fugit nostrum odio dolorum sequi, odit ratione omnis, atque sunt perferendis commodi, iure.</span>
</div>
You can solve this problem by using text-align
.container {
display: flex;
text-align: justify;
text-justify: inter-word;
}
.span {
margin-right: 5px;
}
<div class="container">
<span class="span">1.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vel aut quidem consequatur quaerat optio ab! Iste fugit nostrum odio dolorum sequi, odit ratione omnis, atque sunt perferendis commodi, iure.</span>
</div>
#mehran text-justify:inter-word; is not a valid CSS property
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to vertically content within a div with flexbox, so that it always remains centered.
However it is not working as expected. Interested to see where I'm going wrong.
Just to confirm, the 'left div' should display the contents in regular vertical order, not horizontally as is currently happening.
section {
display:flex;
}
div {
padding:12px;
width:400px;
height:300px;
display:flex;
align-items:center;
}
.left {background:#bada55}
.right {background:red}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
Link to codepen
You can use flex-direction on .left to make it center vertically:
section {
display: flex;
}
div {
padding: 12px;
width: 400px;
height: 300px;
display: flex;
}
.left {
background: #bada55;
flex-direction: column;
justify-content: center;
}
.right {
background: red;
align-items: center;
}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
EDIT based on your comment, I believe this works:
section {
display: flex;
align-items: center;
height: 300px;
}
div {
width: 400px;
padding: 12px;
}
div.right {
display: flex;
align-items: center;
}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 3 years ago.
I'm messing around with trying to target the first <p> tag in a div that has a data attribute of data-item="8"
So far, I've tried this:
[data-item="8"] p:first-child {
font-size: 1.8rem;
}
as well as this:
p:first-child [data-item="8"]{
font-size: 1.8rem;
}
and it's not picking up on the style change. Not sure if I am going about this all wrong or if I am missing something where that's not going to work.
HTML:
<div data-item="8">
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ut aliquid perspiciatis a aliquam repellat non ipsum necessitatibus distinctio quos molestias asperiores quis eaque, laudantium ipsam nulla adipisci quo nemo!</p>
<p>Quam soluta quis doloribus, ut cum iste cumque earum aliquam ratione! Fugiat nemo animi ut corrupti tempora, omnis nulla. Culpa a quibusdam sequi quia totam dolores magni ducimus nesciunt expedita.</p>
</div>
Here you go man. Just the wrong css selector.
https://codepen.io/jackgisel/pen/dyPxrOG
[data-item="8"] p:first-of-type {
...
}
So basically, I have this structure (sample) :
<div class="container">
<div class="header">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti odio pariatur numquam aspernatur ex iste praesentium. Aliquid quo voluptas eaque sequi autem voluptatem alias ullam provident tempora adipisci optio error!
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit esse assumenda eligendi obcaecati quas sapiente voluptatum a enim quam officia aliquid exercitationem earum at sint harum ullam nostrum distinctio! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit esse assumenda eligendi obcaecati quas sapiente voluptatum a enim quam officia aliquid exercitationem earum at sint harum ullam nostrum distinctio!
</div>
</div>
And this stylesheet :
.container {
height: 100px;
}
.header {
background-color: blue;
}
.content {
background-color: green;
overflow-y: auto;
}
I would like to apply an overflow: auto on the .content as its content overflows the container height, however this simply does not work (see in this fiddle). I can apply an overflow: auto to .container and it will work but I don't want to apply the scroll on the .header element.
Furthermore, the .header height may change, so I can't set a fixed height to .content.
Any idea/suggestion ?
Thanks :)
EDIT : To clarify, I set a height to the container, I cant set a height to neither .header (which may change but won't be bigger than .container) nor .content (which may overlap the .container height because of .header)
You won't be able to do this in CSS unfortunately, but with little javascript it will work.
var container = document.querySelector(".container");
var header = document.querySelector(".header");
var content = document.querySelector(".content");
content.style.height = (container.offsetHeight - header.offsetHeight) + "px";
http://jsfiddle.net/q26cL/3/
It's because you don't have a height. So the div expands accordingly to the content.
I set a height of 120px for .content and it works now.
.content {
height: 120px;
}