CSS

!css

@programming.dev
Create post
CSS, select an element that have div:not(something) possible ? [ solved ]

CSS, select an element that have div:not(something) possible ? [ solved ]

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 ?

`background-attachment: fixed` still scroll :'( [ workaround ]

`background-attachment: fixed` still scroll :'( [ workaround ]

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

The State of CSS Survey for 2024 is open

The State of CSS Survey for 2024 is open

Open link in next tab

State of CSS 2024

https://survey.devographics.com/survey/state-of-css/2024

Take the State of CSS survey

State of CSS 2024
CSS Selectors

CSS Selectors

Open link in next tab

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.

How remove vertical gap between characters ?

How remove vertical gap between characters ?

Lightning CSS: Sourcemap @include paths not updated

Lightning CSS: Sourcemap @include paths not updated

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

Open link in next tab

Flexbox Dynamic Line Separator

https://ishadeed.com/article/flexbox-separator/

Using CSS flexbox default stretching behaviour to create a dynamic line separator.

Flexbox Dynamic Line Separator
Infinite-Scrolling Logos In Single HTML Container And Pure CSS

Infinite-Scrolling Logos In Single HTML Container And Pure CSS

Open link in next tab

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.

Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
CSS Folding Effect

CSS Folding Effect

Open link in next tab

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!

Folding the DOM
An Interactive Guide to CSS Container Queries

An Interactive Guide to CSS Container Queries

Open link in next tab

An Interactive Guide to CSS Container Queries

https://ishadeed.com/article/css-container-query-guide

Learn how to use CSS container queries today.

An Interactive Guide to CSS Container Queries