Unforeseen issues arise when working with CSS selectors

Question

Unforeseen issues arise when working with CSS selectors

Exploring CSS with a series of buttons and encountering some unusual behavior. Here's the code:

https://codepen.io/buoyantair/pen/JNgqXG?editors=1100

Let me share the snippets for Pug Script and Sass file:

Pug Script

    header.row
        .col
            h1 Hover Buttons
            p A small variation of buttions I made.
            p Made by <a href="https://codepen.io/buoyantair">@buoyantair</a>
    .row
        button.btn Hello
        button.btn-ghost World
        button.btn-pill Cat
    .row
        button.btn-fall Kitty
        button.btn-hang World
        button.btn-wobble Cat

Sass file

    =flex($direction, $position)
        display: flex
        flex-flow: $direction
        justify-content: $position

    ...
    
    // Animations
    @keyframes pill
        0%
            left: 100%
        100%
            left: -100%

Noticing some oddities, particularly around the usage of selectors like button.btn ~ [class*="-fall"]. While this works for the first row, it behaves differently for the second row. Attempted alternative selector options like button[class*="-fall"] and [class*="-fall"], which performed as expected. Seeking guidance on why certain selectors are causing inconsistencies. Any insights or solutions would be greatly appreciated!

html css sass css-selectors pug

Answer 1

Answer №1

If the button.btn ~ [class*="-fall"] selector is failing, it could be due to the fact that the only [class*="-fall"] element is the first child within its parent container .row. In your Pug code snippet, this can be observed here:

.row
    button.btn-fall Kitty
    button.btn-hang World
    button.btn-wobble Cat

The reason why button.btn[class*="-fall"] is not working is because the buttons lack the exact "btn" class. Although they do possess a class beginning with "btn", it is not simply "btn". Consequently, .btn-fall may match, but not .btn.

To simplify matters, you might consider assigning two classes to each button instead of one combined class:

.row
    button.btn Hello
    button.btn.ghost World
    button.btn.pill Cat
.row
    button.btn.fall Kitty
    button.btn.hang World
    button.btn.wobble Cat

This way, all buttons will carry the "btn" class, allowing for the use of two class selectors for element matching rather than depending on an attribute substring selector, which is less conventional.

However, if every button is going to possess the "btn" class regardless, having it included may be redundant in the end.

Answer 2

If the button.btn ~ [class*="-fall"] selector is failing, it could be due to the fact that the only [class*="-fall"] element is the first child within its parent container .row. In your Pug code snippet, this can be observed here:

.row
    button.btn-fall Kitty
    button.btn-hang World
    button.btn-wobble Cat

The reason why button.btn[class*="-fall"] is not working is because the buttons lack the exact "btn" class. Although they do possess a class beginning with "btn", it is not simply "btn". Consequently, .btn-fall may match, but not .btn.

To simplify matters, you might consider assigning two classes to each button instead of one combined class:

.row
    button.btn Hello
    button.btn.ghost World
    button.btn.pill Cat
.row
    button.btn.fall Kitty
    button.btn.hang World
    button.btn.wobble Cat

This way, all buttons will carry the "btn" class, allowing for the use of two class selectors for element matching rather than depending on an attribute substring selector, which is less conventional.

However, if every button is going to possess the "btn" class regardless, having it included may be redundant in the end.

Unforeseen issues arise when working with CSS selectors

Answer №1

Similar questions

When the page is loaded, ensure a condition is met before displaying a modal pop-up using AngularJS

Using HTML5 and CSS transitions to scale an image within a 960 grid layout

Changing the input value in Nuxt / Vue 2 after it has been overridden

The function does not get activated when mouseover event is triggered with AddEventListener

Bootstrap table exceeds the boundaries of the smartphone screen

Improving iframe functionality in AngularJS

CSS rules must include specified units

The picture is malfunctioning

Add a flexible element to a container without disrupting the alignment of the other

Gather data from a variety of HTML5 video seminars

Is it possible to recognize when the mouse button is held down and the cursor is outside the viewport by using mouseleave detection?

Prevent a click event from triggering on one div when another div is clicked using jQuery

Express.js - display the complete information

Turn off CSS scroll snapping past a specific threshold

Creating an HTML form that spans across multiple pages: Tips and tricks

Ways to acquire ttf files from a third-party domain without encountering CORS issues

Is there a way to keep a button in a "pressed" state after it has been clicked?

Creating CSS styles for fluid width divs with equal height and background images

CSS: Creating a block that stretches the entire width of its parent block

Looking to transform a list into JSON format using JavaScript?