Sidebar
CSS
Hi everyone, I have something like this ```html <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 ```css #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](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#fixed) But the background still scroll 😤 This div is under `html body div div div div div` and it CSS properties are ```css #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
Hi, No matter what I try ```html <style> .FlexColumn {display: flex;flex-flow: column nowrap } </style> <div class="FlexColumn"> <div>X</div> <div>X</div> <div>X</div> <div>X</div> <div>X</div> </div> ``` ```html <!-- I tried many CSS trick here... --> <div> <span>X</span><br><span>X</span><br><span>X</span><br><span>X</span> </div> ``` I always get a vertical gap between the characters ! Any ideas ? Thanks.
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.
Video basically explaining how to use named grid columns to avoid those negative margins for breakout and full-width sections
developer.mozilla.org
webdev@programming.dev
tailwindcss.com
cross-posted from: https://programming.dev/post/11085588 >We just tagged the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year.
gomakethings.com
^ preview there seems to have not been created well and made the code block with a header a header but correct text is in the article
cross-posted from: https://programming.dev/post/7667731 > Hi, > > As CSS do not have a color-overlay[^1] filter. > > There is some heavy work around: > > https://isotropic.co/tool/hex-color-to-css-filter/ > > that use a combination of CSS filter to target the desired color... > > Those online calculators are neat, but I would like an offline version, in case the provided one become inaccessible. > > I've downloaded the zip of https://codepen.io/sosuke/pen/Pjoqqp > > But it doesn't work locally.. :/ > > So I would like to know, if someone know one in 🐍 Python ? or how can I make one then ? > > Or if someone know another way to have the color-overlay[^1] effect in html\css, I'm all ears ! > > Thank. > > > [^1]: To apply like in Photoshop a color on the shape of the image (so not on the parts that have transparency.
tailwindcss.com
cross-posted from: https://programming.dev/post/7555221 >There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on that inspiration and turned it into this — Tailwind CSS v3.4.
> cross-posted from: https://programming.dev/post/6940356 > Missing.css is a notch on the complexity slider that's just right for small projects and personal sites where classless CSS is not enough, Tailwind is too much and Bootstrap just doesn't have the right vibe.
www.joshwcomeau.com
cross-posted from: https://programming.dev/post/6425511
