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 {
...
}
Related
I wanted to use a short description in my template. is added. It looks like this:
<div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit eligendi at accusantium vero culpa facilis ipsam enim distinctio iste sed non, quo, provident recusandae architecto voluptas consectetur dicta, voluptatum est. Totam numquam possimus porro eius? Numquam ullam
</div>
</div>
I want to be able to change div to span or p, add classes, etc. Where to find it?
I am working in a Nuxt app and using CSS based smooth scrolling to anchor links. The smooth scroll itself works but the scroll-margin property is achieving nothing... it is seemingly completely ignored. The exact same code works fine outside of the Nuxt app so I wonder whether it is something to do with Nuxt.
Slimmed down version of the code is as follows and I have also created a (working) non-Nuxt codepen to show the code in action outside of Nuxt.
For the sake of clarity, I want to use CSS only to achieve smooth scrolling with a scroll margin in Nuxt. I do not want to use JavaScript or built in Vue / Nuxt features. If I have to I will but, at the very least, I'd like to know why scroll-margin is not doing anything.
HTML
<main>
<header>Fixed header</header>
<section>Click this link to scroll to a section further down the page and show the targeted state. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section id="scroll-section"> <strong class="show-on-target">Check out the space between this block and the header 👆 The block is clear of the header thanks to the <code>scroll-margin</code> property. The block was blue before you clicked the link and this text wasn't here either.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
</main>
SCSS
* {
box-sizing: border-box;
font-family: helvetica;
margin-inline: 0;
line-height:1.5;
}
html {
scroll-behavior: smooth;
}
header {
position: fixed;
display: grid;
place-content: center;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 3rem;
background: #ed6a5a;
font-size: 1.5rem;
}
section {
background: #9bc1bc;
padding: 50px 30px;
&:nth-child(2n) {
background: #f4f1bb;
}
&:first-of-type {
padding-block-start: 20vh;
}
}
strong {
font-size: 1.2em;
}
code {
font-family: monospace;
}
:target {
scroll-margin: 5rem;
background: #F2D7EE;
.show-on-target {
display: block;
margin-block-end: 20px;
}
}
.show-on-target {
display: none;
}
What I tried:
Using the code above to create a CSS-only smooth-scroll including a scroll-margin. I also tried tweaking the code above to use section, [id], section[id] and #myAnchor in place of :target but to no avail.
What I was expecting:
Page to scroll smoothly to the anchor leaving a 5 rem margin above it.
What actually happens:
Page scrolls smoothly to the anchor but with no margin above it
As you can see the code below, div is the outermost scrolling container and the core in this topic section is a containing block with spans set as white-space: pre;.
One section is extremely simple and is just a block. The other .floated is set float: left;.
But the computed width of them is different: the former is just as wide as its containing block div i.e. 100px in this case, in contrast to the latter is as wide as its contents, around 1287.47px(given by Firefox). To make this difference more observable, I set a background color for both of them.
So the question comes:
My understanding is that the width of a block with width: auto; depends on its contents. Why is the first section not?
The expected effect is achieved by using float: left;, as .floated shows, but why and how does it work? What exactly does the float do? A new BFC? But if I change float to display: flow-root; which also creates a new BFC, it still doesn't work.
Thanks in advance for your help!
div {
border: 1px solid red;
width: 100px;
overflow: auto;
}
section {
background-color: teal;
}
span {
white-space: pre;
}
.floated {
float: left;
}
<div>
<section>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
<span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
<span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
<span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
<span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
</section>
</div>
<div>
<section class="floated">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
<span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
<span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
<span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
<span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
</section>
</div>
Online Demo
My understanding is that the width of a block with width: auto; depends on its contents.
It doesn't. The width of a block level element should respect this formula:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
As you can see, the content play no role in defining the width of your element and it will end with a width equal to its containing block (parent element). That's why you have the logical result of 100px. After defining the width, the content should try to fit that width but you have disabled line breaks with white-space: pre so all you will get is an overflow.
When, you make the div floated you need to consider another part of the Specification that describe the width of floating elements and you can read:
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
The content is considered in the "shrink-to-fit" algorithm.
In your case, since you are using white-space: pre you are not allowing any line break so the "preferred minimum width" will be the winner and you will end have a width equal to the longest sentence
If you disable the white-space, you will force line breaks and your content will try to fit the "available space" and both cases will give the same result even if we have different algorithm involved
div {
border: 1px solid red;
width: 100px;
overflow: auto;
}
section {
background-color: teal;
}
.floated {
float: left;
}
<div>
<section>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
<span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
<span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
<span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
<span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
</section>
</div>
<div>
<section class="floated">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
<span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
<span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
<span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
<span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
</section>
</div>
No matter what I try, I can't get an image on my test web page get sticky on scroll. It's here: https://www.varamedia.be/website-laten-maken/restaurants/. I want the image of the laptop with the people in it to be sticky on scroll through the other content.
It's a Wordpress site and I also noticed something peculiar, namely the CSS that is not recognizing the sticky css, apparently. The error message is: "expected (static | relative | absolute | fixed) but found 'sticky'." Here is an image of it: https://www.varamedia.be/wp-content/uploads/2019/01/sticky.png
I really appreciate any kind of feedback on this. Thanks a lot for sharing your thoughts.
I read all articles I could get my hands on, tried all proposed solutions from the docs I could find online, but it does not work well for me. The image refuses to become sticky.
I tried using ID's, classes, played around with the overflow:hidden; etc But somehow I am missing something here. Though it feels as if I'm overlooking some detail because the position:sticky; CSS feature looks kind of straightforward but apparently isn't :/
.stickyimage{
position:sticky;
}
I'd welcome any advice based on an inspection of the given URL. Thanks a thousand times for your valuable input.
a 'top' or 'bottom' value must be added.
body {
margin:0;
}
p {
font-size:36px;
line-height:50px;
}
.nav {
width:100%;
background:orangered;
height:60px;
font-size:24px;
color:#fff;
text-align:center;
line-height:60px;
/*following codes is for sticky */
position:sticky;
top:0; /* it's up to you */
}
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates voluptatum cum optio a natus iste repellendus eaque at aut, voluptatibus sit veritatis quis quam magnam aspernatur, vero, sunt modi magni.</p>
<div class="nav">This a sticky nav</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p>
You have 2 issues.
Issue #1 - You must delcare either top, bottom, left or right on the element with position: sticky.
Issue #2 - Your parent element can not have overflow: hidden. Right now both the body tag and the html tag have the following...
overflow-x: hidden;
overflow-y: hidden;
Remove these...
You also need to make sure that the stickyclass is on the correct div, you want it on the outer div, in your example it should be on the following div.
I tested this and it works as expected.
On a project I'm working on, there are a few places where there are two columns of text. As this is content manageable, I don't really want to make two separate text areas for the user to fill out, but rather one which I split into two columns with column-count: 2 in CSS. The content will be inside a single p element.
The issue is that I need to style the second column slightly differently. I need to change text-align to right, whilst keeping the first column text-align left.
I know I could do this in PHP and/or JavaScript, but I'd prefer to do this using CSS alone if possible.
Markup:
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nostrum delectus iste sit officia! Molestiae ducimus, sunt omnis earum, vitae vel dolore blanditiis placeat, porro aliquid, non repudiandae recusandae quisquam sit enim. Aliquid placeat, obcaecati autem aut. Eum eaque nemo, voluptas repellat ab recusandae, culpa eos quam voluptates, molestias expedita ipsum debitis dolorem atque explicabo labore consequuntur cumque adipisci quos eveniet error. Sint, provident cum. Totam, nisi, quo. Hic, fugit, iusto. Veniam est nulla, debitis commodi provident fugiat quam earum incidunt, cum vel minima ipsum magnam cupiditate tenetur autem obcaecati aliquam soluta, repellat in quibusdam illo! Dicta numquam, saepe corrupti.</p>
</div> <!-- /.content -->
CSS:
.content p {
column-count: 2;
}
As of now, there is no way to target columns in pure CSS. The closest you could get is using JavaScript to split it with new elements, or amend your markup.
This has been asked similarly before: https://stackoverflow.com/a/21238260/271271
Can you try using this:
table.secondcolumn td:nth-child(2) { text-align: left; }
or alternatively try this SO link
EDIT/Update: Apparently, there are no direct ways (via CSS) to style a specific text column via CSS.