I need to select elements with classes based on their order relative to other child elements within different parent containers.
I tried using nth-child selectors, but I couldn't figure out a way to get them to repeat.

Currently, I just have a bunch of elements with classes being selected. Not optimal, but it works.

.container1:has(input[type="radio"].1:checked) ~ .container2 .1, :has(input[type="radio"].2:checked) ~ .container2 .2, :has(input[type="radio"].3:checked) ~ .container2 .3 {
    background-color: red;
}

I would really prefer not to use JavaScript.

Is there any way to do this without manually adding more classes or using JavaScript? Any help is appreciated.

I'm relatively new to using `@container` queries. I love them. Makes responsive work so much easier.

That said...I rant into a problem today.

We use some JS frameworks one of which creates pop-up menus for us (which, in turn, is based on popper.js believe).

Like a lot of pop-up scripts, it gets the position of the element clicked on relative to the viewport and then positions the menu accordingly with position: fixed.

The catch is that because I am using `container-type: inline-size`, the menu it is positioning is actually relative to the container--not the viewport.

So it's actually positioning the pop-ups off screen for me.

Before I write a bunch more JS on top of our existing JS to get around this, is there a way to fix this with CSS? Is there a way to allow children of a `inline-size` container not 'reset' their position based on that?

The JS fix would be clunky...essentially me getting the upper-right coordinate of the container, calculate that position relative to the viewport, get the positioned menu, do the math, then reset the position of the menu.

What I can tell, setting it to container-type: normal fixes my menu problem, as it's no longer containing the children elements, but that breaks my responsive layout as it no longer obeys the query.

I've been trying to recreate https://snipboard.io/rLjXHJ.jpg this where the logo is excluded from the backround and its excluded in this rounded shape

and this is what ive been able to reach so far https://snipboard.io/ht1vKf.jpg with the following code

 <div className="py-5 relative z-10 mt-[-4rem] rounded-br-5xl">
<div
className="bg-white p-5"
style={{
clipPath: "clip(0 0, 100% 0, 90% 100%, 10% 100%)",
}}
>
<Image
src="https://cdn.tailgrids.com/2.0/image/assets/images/logo/logo-primary.svg"
width={200} // Adjust the width as needed
height={60} // Adjust the height as needed
alt="logo"
/>
</div>
</div>

does anyone have an idea as to how to accomplish styling like that? would appreciate some help

This is the link to it: https://codepen.io/m0ke0/pen/MWRZMpo

This is inspired by Newton's cradle and simplified down to just 2 balls, but more could definitely be added.

I want to scroll with Javascript to top of the page with smooth behaviour. This is the javascript code :

window.scrollTo({

top: 200,

behavior: 'smooth'

});
and I also added to css :

html {

scroll-behavior: smooth;

}
but scrolling doesn't work at all. If I delete the behaviour: 'smooth', scrolling works. How can i make scrolling work with smooth behavior ?
My firefox version is: 115.10.0esr (64-bit)

Contextual styles allow us to do a sort of inverse-nesting which lets us keep all styles in one place. Here's how it is done in Styled components

const TextLink = styled.a`
  /* Standard styles: */
  color: blue;
  text-decoration: none;

  /* Styles when rendered inside a quote: */
  ${QuoteContent} & {
    color: black;
    text-decoration: revert;
  }
`;

What the above code does is applies the default styles of color: blue; text-decoration: none; to all anchor tags. But, if the anchor tag is nested within a QuoteContent tag (<blockquote>), it'll apply the styles color: black; text-decoration: revert;. The benefit of doing this is that we keep all styles relating to the <a> in one place rather than scattering it all over the application. Here's another example in the docs: https://styled-components.com/docs/advanced#referring-to-other-components

I'm fairly familiar with Tailwind, and looked through the docs, but I couldn't find an equivalent way of doing so. Anybody knows how contextual styles are applied in Tailwind?

I'm trying to build media queries so I Googled my phone to start there. I have a Galaxy S21 which the internet says is 360x800. When I go to howbigismybrowser.com on my device using chrome, it says 412x828.

So...is my phone 300x800 or 412x828? Why would all of the internet be saying incorrect viewport dimensions? This makes it very difficult to style for mobile...

Hi to all!

I have this site:

https://coastalconstruction.com/

If you enter the site, you'll notice that some CSS shows before the site loads, it's annoying and I can't really find what is it.

Any help would be really appreciated!

Thanks!

I have made a mobile nav for my site, but when I open or close it the links inside stretch when opening and squish when closing.

I know it is because I am using a scale on the nav, so it scales the children as well, but I can't think how to do it without scale (This is my first time making a dropdown nav of this type :P ).

Below is a video of the problem and my HTML and CSS.

What is a better way of making this nav? Thanks

FYI, I'm using astro, shouldn't affect anything but just for context. If you need any more info, just lmk.

HTML:

<nav data-visible='false'>
<a href='/my-work' data-text-decoration='hula'>My Work</a>
<a href='/blog' data-text-decoration='hula'>Blog</a>
<a href='/contact-me' data-text-decoration='hula'>Contact Me</a>
</nav>

CSS:

nav {
display: flex;
flex-direction: row;
gap: 2rem;
}
a {
font-size: 0.8rem;
color: var(--clr-light-100);
font-family: var(--ff-primary);
font-weight: 600;
letter-spacing: 0.25rem;
text-transform: uppercase;
transition: color 200ms ease;
}
a:hover {
color: var(--clr-light-200);
}
u/media only screen and (max-width: 901px) {
nav {
position: absolute;
inset: 100% 0 auto;
justify-content: center;
align-items: center;
flex-direction: column;
background: var(--clr-dark-110);
border-top: 1px solid var(--clr-light-200);
backdrop-filter: blur(0.5rem);
transition: all 250ms ease;
scale: 1 0;
gap: 2rem;
transform-origin: top;
padding: 2rem;
}
nav[data-visible="true"] {
scale: 1 1;
}
}

The problem

I'm working on making some interactive redacted bars in blocks of text, and I'm essentially trying to add background-color: [whatever the reader's text color is] to a span. Then, whenever the span is active or hovered over, the background-color would revert to normal, revealing the text. Is that something that's possible?

Most of the examples I've found where people already do this, they assumed the reader would be looking at a white screen with black text, so just made the background black, but the platform this is for has both a light mode and a dark mode, and I want this to work for both equally.

Hi everyone!

I am working on a project, and I am trying to allow multi-language.

A part of my (HTML) code looks like this:

<div
   class="class1 class2"
   v-if="condition1"
>
   <span v-if="condition2">Some sentence</span>
</div>

And then, the CSS part:

&.class2 span { 
  # Some other CSS properties here
  &:before {
   content: "My text";
  }

Here it works perfectly. When we are hover this element, we see the text "Some sentence", with on the left, "My text".

What I am trying to do now is replace this content, "My text", by a variable, so this string will change according to the language used by the user. The variable is locale.fileA.myText. And if I use it in the HTML part, the text works perfectly, but I cannot make it in CSS.

I tried content: locale.fileA.myText, :content: "locale.fileA.myText", content: "{{ locale.fileA.myText}}, but no one work.

So, what is the good syntax?

Thanks in advance.

My colleagues and I are thrilled to announce that we are working on this year's State of Frontend report. This biannual study captures the current landscape of frontend web development with insights from industry experts. Our previous survey gathered over 3,700 responses from 125 countries.

This year, we're excited to try something new. Before finalizing the survey for the report, we're turning to you — the frontend development community — to help us shape both the questions and the answers. By involving the community, we aim to reflect better the actual state of frontend development, which is as much about the people as it is about the tools.

To that end, we've set up a repository on GitHub containing markdown files with planned survey questions and answers. Review these documents to influence the upcoming State of Frontend 2024 report, and share your thoughts and ideas with us by creating a GitHub issue. We also welcome pull requests with your suggested changes.

We will be grateful for any feedback. Your help making this year's report not just informative but transformative. Let's build something great together!

this is what I tried (codepen)

https://preview.redd.it/8lgqtzs1cvvc1.png?width=1440&format=png&auto=webp&s=f6a4b8f3a705eb64bfa09c5bdfd9fc6e7177bf59

​

• Font Awesome
• IconMonster
• Icons8:
• IconFinder
• Fontello

based on this code in jsfiddle : click herei want to make `div .table-content` scrollable but after applying css property "overflow:scroll" to that div element, the browser (tried in all browsers) snapped into an error showing message "status access violation" when i hovered on the element.

what could possibly the reason to this error? is there anything wrong with the way i set height property in relation to its parent element?

i tried to look through chrome error.log, but it doesn't contain anything related to the error

thank you..

        <section class="accordion-section">
            <div class="accordion-container">
                <div class="accordion">
                    <div class="accordion-item" id="question1">
                        <a class="accordion-link" href="#question1">
                            1. What qualifications do I need to enroll in flight training?
                            <ion-icon class="plus-sign"  name="add-outline"></ion-icon>
                            <ion-icon class="minus-sign" name="remove-outline"></ion-icon>
                        </a>
                        <div class="answer">
                            <div class="answer-text-block">
                                <p>
                                    To enroll in flight training, you typically need to be at least 16 years old to fly solo and 17 years old to obtain a private pilot license (PPL). You must also pass a medical examination conducted by an Aviation Medical Examiner (AME). Additionally, a passion for aviation and a commitment to learning are essential.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item" id="question2">
                        <a class="accordion-link" href="#question2">
                            2. How Do I get started with training?
                            <ion-icon class="plus-sign" name="add-outline"></ion-icon>
                            <ion-icon class="minus-sign" name="remove-outline"></ion-icon>
                        </a>
                        <div class="answer">
                            <div class="answer-text-block">
                                <p>The first step is scheduling an introductory flight with us at our San Diego location. We fly seven days per week.  The discovery flight cost is $160.  Once you schedule your training flight with us, we will fly out of San Diego’s Montgomery Airport.  You will get hands-on experience taking the controls of the aircraft as we go over the basics of flying.  Please note that we do not accept walk-ins and we are appointment only.  </p>

                                <p>Your lesson will be approximately 2 hours in length, including 1 hour of ground training and 1 hour of flight instruction.  Once we have completed the flight, your instructor will give you a certificate of completion which you can use towards your hours required for your private pilot license.  Generally we require bookings to be made at least 24 hours in advance, however we are able to accommodate on a shorter notice as availability allows.  All bookings are subject to weather and airplane/instructor availability.</p>

                                <p>You will meet your instructor at Montgomery Airport:<br>
                                3717 John J Montgomery Dr,<br>
                                San Diego, CA 92123</p>

                                <p>There are picnic tables outside of the building where you will find your instructor waiting for you.  Please be on time as we schedule the airplanes and instructors for specific time slots.  Arriving late may result in forfeiture of your deposit and time slot. </p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item" id="question3">
                        <a class="accordion-link" href="#question3">
                            How much does it cost to get your pilot license?
                            <ion-icon class="plus-sign" name="add-outline"></ion-icon>
                            <ion-icon class="minus-sign" name="remove-outline"></ion-icon>
                        </a>
                        <div class="answer">
                            <div class="answer-text-block">
                                <p>
                                    At GoFly San Diego we want to be upfront about the cost to get your license.  Many schools will tell you one price, and then it’s a completely different price by the time you finish your pilot license.  As a student there are no large upfront investments.   You pay by the hour for your flight instruction and airplane.  The flight instructor cost is $85 per hour.  The airplane rental price depends on the airplane, but on average it is $150 per hour.  
                                </p>
                                <p>
                                    Minimum FAA requirements for your private pilot license under Part 61 are 40 hours total flight time including 20 hours with an instructor and 10 hours of solo flight time.   The remaining 10 hours may be with an instructor or solo.  Using the minimum hours and having the remaining 10 hours being solo time, flight training will cost $7,700.  The FAA exam fee is $800.  And then you need to purchase charts, a headset, kneeboard (for writing fancy pilot notes while flying), pay for an FAA written exam and an online ground study course.  This adds approximately an additional $600.  This puts us at a minimum price of $9100.  However, on aver students require 50+ hours of flying to obtain their private pilot license and we recommend a budget of $12,000 to include additional practice as needed. 
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--END FAQ ACCORDION-->

CSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

:root { --color1:#18E0FF; --color2:#FACF39; --color3:#354A5F; }

.accordion-section{ width: 100%; height:100vh; display: flex; align-items: center; justify-content: center; }

.accordion-container{ width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }

.accordion-item{ background-color:var(--color3); border-radius: .4rem; margin-bottom: 1rem; padding: 1rem; box-shadow: .5rem 2px .5rem rgba(0, 0, 0, .1); }

.accordion-link{ font-size: 1.2rem; font-style: italic; color: rgb(255,255,255); text-decoration: none; background-color:var(--color3); width: 100%; display:flex; align-items: center; justify-content:space-between; padding: 1rem 0; }

.accordion-link i{ color: #e7d5ff; padding: .5rem; }

.accordion-link .minus-sign{ display:none; }

.answer{ max-height:0; overflow: hidden; position: relative; background-color:var(--color3); transition: max-height 650ms; }

.answer::before{ content:""; position: absolute; width: .6rem; height: 90%; background-color: var(--color2); top: 50%; left:0; transform: translateY(-50%); }

.answer-text-block{ color: rgb(255, 255, 255); font-size: 1rem; padding: 0rem 2rem; }

.accordion-item:target .answer{ max-height:70rem; }

.accordion-item:target .accordion-link .plus-sign{ display:none; }

.accordion-item:target .accordion-link .minus-sign{ display:block; }

I am trying to make a `<div>` which has a `max-width` of `min(200px, 100%)`. It is in a container with `width: min-content` and contains some text which has `overflow-x: hidden`. If I set it's `max-width` to just `200px`, everything works fine. If the parent of the container is the entire viewport, `min(200px, 100vw)` also works fine. However, my actual `<div>` might not be constrained to the entire viewport, so that is not suitable. But, for some bizarre reason, if I set it's `max-width` to `min(200px, 100%)`, then the container takes on the entire width of the hidden text (> 200px) even though the `<div>` is 200px wide. This happens no matter how I constrain the width of the container (e.g: by making its container a flexbox).

Here is a Codepen demonstrating the issue. What is causing this strange behaviour?

I hope you're all well. I'm writing a document with mixed text in Chinese characters & Romanisation (both Cantonese, but different representations of Cantonese). I'd like to use the generic 'fantasy' font-family for characters in the CJK range (U+4E00-9FFF) & 'sans-serif' for those that appear in Latin script. I'm having some difficulty figuring out how to do this. Is there a straightforward way to do this with CSS alone? (Edit: I have looked at documentation on @ font-face, which seemed promising, but 'fantasy' & 'sans-serif' don't count as valid values for src, & I'm not sure how else to specify them.)

​

https://preview.redd.it/601rvf415ovc1.png?width=640&format=png&auto=webp&s=09b6ed07e05569de8f9d54cca9c3c6ba9b93f64c

Hi everyone, i´ve created an article in Medium about how powerful can be CSS, the project is available free for download

https://medium.com/@chriisduran/the-power-of-css-323334bd3629

Hi,

I'm trying to make a sidebar with collapsible sections using radio buttons and css animations. So far it works, but the problem is everything happens in the wrong order - the new section expands and then the previous section closes.

Here's my code:

.sidebar .link_group:has(input[type='radio']:checked) ul {
    max-height: 1000px;
    transition: 0.3s ease-in max-height;
}

.sidebar .link_group ul {
    max-height: 0px;
    overflow: hidden;
    transition: 0.3s ease-out max-height;
}

I'm probably missing something quite silly but I can't work it out. That or it's not possible at all lol

Transition delay doesn't seem to have any effect. Can anyone help? Thanks.

Hi all, I've been bashing my head against this for a few days and need to talk to people about this. The problem statement is as follows:

I need a column-oriented list of items, all the same size and width, that will prioritize filling the variable width of the element first; the height does not matter. It should do this without putting any extra space between the elements.

To my knowledge, there are three ways to obtain a column-oriented list. Each has its own problem when attempting to achieve this result.

1. (Closest solution) Using column-width. This solution behaves nearly exactly how I'd like, except for when resizing the window, the extra space created before there's enough room for a new column is distributed between the columns. Setting column-gap to 0 does not stop this behavior, and to my knowledge there is no way to "align" columns completely to the left. Still, the list appropriately fills the given width with columns, then adds content to those columns to whatever height the content requires.

2. Using flexbox with flex-direction:column, flex-wrap:wrap, and align-content:baseline. This looks promising but it fills out height first, requiring me to set an explicit height for it to begin to wrap. No matter how wide I make the element, it won't be filled out unless the element height gives it a reason to wrap. The reason this isn't ideal is because even if I use vh for dynamic height, on mobile, this will force the list out of the viewport to the right.

3. Using grid with grid-auto-flow:columns and auto-fill columns and rows. Same issue as with flexbox, it will not wrap unless the height is a limiting factor. I want the height to be theoretically unlimited, and the list to instead fill out the width first.

The exact methodology here isn't important to me-- I was wondering if there was a different way I could generate/pre-order the inner divs to make them appear as column-oriented but didn't get far since the number of columns is variable.

Happy to attempt any solutions given in the comments, or answer any questions about the problem. Thank you!!

When creating a sign up form with the label and input how can I make it so the words appear on top of the input bar instead of the side

Hi there, for those of you working with Tailwind CSS:

I've been working extensively with Tailwind for the past 2 years, and I've collected some of my favourite tips and hacks that I think every developer could benefit from. I’ve put these together in a blog post, hoping it might offer you some new tricks and perhaps even solve some common frustrations.

Would love to hear about some feedback, what you learned or your go-to tips or hacks!

hello dear reditors, I have a small issue where I am remaking my whole website using new things I learned in css and while playing with the transform and ::after to make some animation, I got a part of the animation that go out of the text then go back when the animation is finish :

​

Before the animation

While the animation

After the animation

Here the css :

body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: 'Ubuntu', sans-serif;
    color: bisque;
}

// Link style
a {
    color: bisque;
    text-decoration: none;
    border-bottom: 1px solid bisque;
    transition: color 0.3s;
    position: relative;
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: bisque;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.3s;
    }

    &:hover {
        color: black;
        &::after {
            transform: scaleY(1);
        }
    }
}

And here the html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu:b|Ubuntu:i|Ubuntu:500">
    <link rel="stylesheet" href="/src/css/style.css">
    <title><Sarxzer/></title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="contact.php">Contact</a></li>
            <li><div class="dropdown">
                <button class="dropbtn">Dropdown</button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div></li>
            <li><div class="dropdown active">
                <button class="dropbtn">Dropdown 2</button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div></li>
        </ul>
    </nav>
    <main>
        <h1>Welcome to my website</h1>
        <p>This is a paragraph</p>
    </main>
    <footer>
        <p>&copy; 2020 Sarxzer</p>
    </footer>
</body>
</html>