Same property for a multiple ID's (CSS)

Question

I need to create a new CSS button instead a simple image button on my page.

The first step is to hide the .img id. There img id is "img#bfPickFiles" and it is incremented by numbers, ex: "img#bfPickFiles1932", "img#bfPickFiles1933" etc...

After that I have a div id for the button coded like that: "#bfPickFilesholder". But an incrementation is added in the middle, as "#bfPickFiles3732holder", "#bfPickFiles3733holder" etc... (from 3281 to 3745).

What I've done:

Added the following code to hide the img button:

.img#bfPickFiles { display: none !important; }

But no result.

I have tried the following techniques to get multiple Id's in one property for a div id:

Css Selectors: Select id or class with a random part in the middle

CSS selector (id contains part of text)

No one is working.

Expecting the following button code working (also please see screenshots):

[First image][1]https://yourimageshare.com/ib/QuydRDfgBN

[Second image][1]https://yourimageshare.com/ib/yKYRwOOqqR

[Third image][1]https://yourimageshare.com/ib/wl5oCK4aW4

[Fourth image][1]https://yourimageshare.com/ib/iTViM0Uci3

.img#bfPickFiles {
    display: none !important;
}

#bfPickFiles3282holder {
    display: block !important;
    background-image: linear-gradient(to top, #a6a6a6, #afafaf, #b7b7b7, #c0c0c0, #c9c9c9);
    width: 180px;
    height: 30px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

#bfPickFiles3282holder:hover {
    background-image: linear-gradient(to top, #7c7c7c, #858585, #8e8e8e, #989898, #a1a1a1) !important;
}

#bfPickFiles3282holder::before {
    font-family: "Font Awesome 5 Free";
    content: "\f574";
    display: inline-block;
    font-size: 20px;
    color: #fff;
    padding-right: 2px;
    padding-left: 6px;
    padding-top: 3px;
    font-weight: 600;
}

#bfPickFiles3282holder::after {
    content: "CHARGER UN DOCUMENT";
    font-size: 0.75em;
    padding-left: 3px;
    color: #fff;
}

Where ".img .bfPickFiles" supposed to hide the image.

And ".bfPickFiles3282holder" needs to contain multiple ID's (from 3281 to 3745)

Thanks in advance. Max.

I would recommend checking out [mcve] as that will assist in finding the best solution. — imvain2, Mar 20 '23 at 20:53
Please see the following screenshots: https://yourimageshare.com/ib/QuydRDfgBN https://yourimageshare.com/ib/yKYRwOOqqR https://yourimageshare.com/ib/wl5oCK4aW4 https://yourimageshare.com/ib/iTViM0Uci3 — Maxime K., Mar 20 '23 at 23:24
See https://stackoverflow.com/questions/23747439/how-to-get-element-by-its-partial-class-name-css how to check for a partial class name — Ingo Steinke, Mar 21 '23 at 07:20
Hello Ingo! Thank you very much, I tried this one: [id^=bfPickFiles][id$=holder] and it works! Can you suggest any solution to hide the img id? Actually I have the following CSS .img#bfPickFilesXXXX, where XXXX are all elements contained in the img id. I used this code: .img#bfPickFiles { display: none !important; } But no significant changes... — Maxime K., Mar 21 '23 at 21:36

score 0 · Accepted Answer · answered Mar 21 '23 at 07:24

0

You might want to target your element by their partial class name using CSS attribute selectors like this:

[id^=bfPickFiles]

answered Mar 21 '23 at 07:24

Ingo Steinke

766
3
11
30

Same property for a multiple ID's (CSS)

1 Answers1