Hi everyone,
I have something like this
<div id="container">
<div>
<div class="foobar"></div>
</div>
<div>
<div class="foobar"></div>
</div>
<div>
<div class="foobar"></div>
<div class="barfoo"></div>
</div>
<div>
<div class="foobar"></div>
</div>
<div>
<div class="foobar"></div>
</div>
<div>
I would like to select all the #container > div
(the childs of container)
that do not have a div.barfoo
in their childs.
is it possible with CSS ?
I'm at
#container> div :not(div.barfoo) {}
but this is not working, and will select anyway #container > div > div
Any ideas ?
Hi everyone,
I would like one of my div
to have an background-attachment: fixed
But the background still scroll 😤
This div is under html body div div div div div
and it CSS properties are
#TheDiv {
min-height: 100vh;
min-width: 100vw;
background-image: url('/anImage.jpg');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
left: 0;
padding: 40px;
box-sizing: border-box }
Any Ideas, what could cause the background to scroll anyway ?
Thanks
State of CSS 2024
https://survey.devographics.com/survey/state-of-css/2024
Take the State of CSS survey
CSS Selectors | CSS-Tricks
https://css-tricks.com/css-selectors/
A complete guide covering all of the various methods we have to select elements in CSS and how to use them for applying styles.
When I use the --sourcemap
argument in the CLI to generate the CSS builds with sourcemaps, when the CSS uses @include
, it does not update the path and therefore will not work.
In the code below, the builds are stored in the dist directory, while the CSS source code is stored in the src directory.
This is my simple code to reproduce this...
- src/
- stylesheet.css
- dist
- my-package.css
- my-package.css.map
- demo.html
- bundle.css
- package.json
bundle.css
@import 'src/stylesheet.css';
demo.html
<link rel="stylesheet" href="dist/my-package.css">
package.json
{
"name": "my-package",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "lightningcss --sourcemap bundle.css -o dist/my-package.css"
},
"devDependencies": {
"lightningcss-cli": "^1.25.1"
}
}
src/stylesheet.css
body {
background-color: red;
}
dist/my-package.css output
@import "src/stylesheet.css";
/*# sourceMappingURL=dist/my-package.css.map */
What I expected from the dist/my-package.css output
@import "../src/stylesheet.css";
/*# sourceMappingURL=dist/my-package.css.map */
Does anyone know why this is the outcome? Any help will be most appreciated.
Flexbox Dynamic Line Separator
Flexbox Dynamic Line Separator
https://ishadeed.com/article/flexbox-separator/
Using CSS flexbox default stretching behaviour to create a dynamic line separator.
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
https://www.smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css/
Remember the HTML `` element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that makes it possible with a set of images and as little HTML as possible.
Folding the DOM
https://www.joshwcomeau.com/react/folding-the-dom/
In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real-life. On that journey, we'll learn a lot about 3D transforms and CSS animation techniques!
An Interactive Guide to CSS Container Queries
https://ishadeed.com/article/css-container-query-guide
Learn how to use CSS container queries today.