CODEWITHSUNDEEP
csssass
phunder
phunder

Reputation: 1713

Select all elements with overflow-y=scroll not working

Good day

I am trying to do something that should be simple, but not having much luck. I want to select all elements with the following CSS property and value:

overflow-y: scroll

Here is what I have tried based on two separate and conflicting W3Schools articles:

*[overflow-y=scroll] {
  background-color: red;
}

*[overflow-y="scroll"] {
  background-color: red;
}

Articles in question being these:

https://www.w3schools.com/css/css_attribute_selectors.asp

https://www.w3schools.com/cssref/sel_attribute_value.asp

Does anyone have any idea what I am doing wrong here, please? I'd greatly appreciate any advice

Upvotes: 0

Views: 431

Answers (1)

Pyry Lahtinen
Pyry Lahtinen

Reputation: 499

The problem is that in the articles you linked, CSS searches through HTML attributes, not CSS properties. So you can use square brackets to search in HTML attributes like this:

#input[type="number"] {
    background-color: red;
}

<input type="number" placeholder="Enter your age">

But unfortunately you can't access CSS properties in the same way.

Solution 1: CSS

Assuming that you set overflow-y with CSS, you can use same selectors to set the background-color. For example:

.scrollCont {
    overflow-y: scroll;
    background-color: red;
}

Solution 2: JS

You can loop through elements and check if the overflow-y has value of scroll.

[...document.querySelectorAll("*")].forEach(elem => {
    if (getComputedStyle(elem).getPropertyValue("overflow-y") == "scroll")
        elem.style.backgroundColor = "red";
});

Upvotes: 1

Related Questions