CSS selector within a class or id that targets only one filetype

I’m new to CSS (VERY new, third day), and have searched high and low for someone who had this same query, but I haven’t found anything. So far I’ve tried making a class or an id for an image, and within that class/id I want one specific filetype (.gif) to vary in size from the other image types. I’m pulling my hair out, I can’t figure out how to select any instance of the filetype, as opposed to a specific gif.

I’ve tried :target, but I’m not sure how to target a filetype as opposed to an url with a specific name.

My latest effort was this (I’ve also tried giving jpgs and pngs the same specific code above the gifs with the same content, but it didn’t work):

.items {
        clear: both;
        display: flex;
        position: relative;
        width: 100%;
        max-width: 200px;
            height: auto;
        max-height: 100%;
        object-fit: contain;
        margin: 5px;
        img[href*='.gif'] {
            width: 100%;
            max-width: 80px;
                height: auto;
            max-height: 100%;
            object-fit: contain;
            margin: 5px;
        }
}

What I was expecting was that all images within that class would have one style, EXCEPT gifs, which have another style. What I get is the .items class applied, but not the gifs selector. So, is it possible to select just .gifs within this class?

Can someone please tell me what I’m doing wrong, or if it’s simply not possible to include this in a class, or what? I have a script folder for javascript, but no idea how to write any if necessary (it’s there with some legacy code for swapping images that someone gave me 20 years ago). My file structure is:

named folder
index.html
subfolder: _CSS
_name-of-folder styles.css
_name-of-folder scripts.js
subfolder: name-of-folder images/cast/items
imageX.jpg
imageY.png
imageZ.gif

>Solution :

You can select html object with attribute equal to something with

img[src="something"] {
    /* Your styles here */
}

But as you need to select only by file extension, you can use $= as shown below

img[src$=".gif"] {
    /* Your styles here */
}

As for your code:

• mistake one: you’re using *= which will check if .gif is mentioned anywhere in string,but you need to use $= to check if .gif is in last
• mistake 2: css doesn’t support nested selection, and you seem to use default css: so corrected code will be like:

.items {
    clear: both;
    display: flex;
    position: relative;
    width: 100%;
    max-width: 200px;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    margin: 5px;
}

.items img {
    width: 100%;
    max-width: 80px;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    margin: 5px;
}

/*This targets only GIF images within .items*/
.items img[src$=".gif"] {
    border: 2px solid red; /*Example style for GIFs..*/
}