Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks so much for your help, guys, and especially you, redoc! I think I figured it out through this kluge: I just specified the size for each filetype. Now they're constrained to the div with the class "items", and each image has the correct size and position. :D

    .items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    margin: 5px;
    border: 2px solid blue; /*Example style for div..*/
}

/*This targets only JPG images within .items*/
.items img[src$=".jpg"] {
  border: 2px solid green; /*Example style for jpgs..*/
  width: 100%;
  max-width: 200px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  margin: 5px;
}
/*This targets only PNG images within .items*/
.items img[src$=".png"] {
  border: 2px solid blue; /*Example style for jpgs..*/
  width: 100%;
  max-width: 200px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
    object-position: center bottom;
  margin: 5px;
}
/*This targets only GIF images within .items*/
.items img[src$=".gif"] {
  border: 2px solid red; /*Example style for GIFs..*/
  width: 100%;
  max-width: 80px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  margin: 5px;
}

  2. 0

    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..*/
}
    <div class="items">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.gif" alt="Image 2">
    <img src="image3.png" alt="Image 3">
    <img src="image4.gif" alt="Image 4">
</div>

    Code sandbox preview/example: https://87y63l.csb.app/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search