Struggling with applying different styles to two image tags within one div tag? I attempted to use CSS to target the images individually, but it didn't work. Can someone help me correct my CSS code?
This is how I tried to apply the CSS:
div img { padding-right: 2px; vertical-align: middle; }
div img img { width: 16px; height: 16px; }
<div>
<img src="..." alt="" />
<img src="..." alt="" />
</div>
To style your CSS, follow this format:
div img:first-child {}
div img:last-child {}
If there are more than two <img> elements within the div, use :nth-child(N)
According to spliter's explanation, IE8 does not support this method. In such cases, utilize the adjacent selector as demonstrated in their response.
The next line must read as follows
div img + img { width: 16px; height: 16px; }
The use of the child selector (+) is feasible in modern web browsers, while :last-child in Internet Explorer is only compatible with versions IE9 and above. It's important to note that any reference to IE6 is irrelevant regardless of how you approach this situation.
To achieve your goal, you can use the CSS selectors :first-child and :last-child without relying on any classes or ids.
div img img {}
The CSS above targets an <img> that is nested within another <img> inside a <div>, which may not be what you need in this case.
div img:first-child { padding-right: 2px; vertical-align: middle; }
div img:last-child { width: 16px; height: 16px; }
If you want to style specific images within a div, you can utilize the CSS3 :nth-type-of selector as shown below
div img:nth-of-type(1) {
padding-right: 2px; vertical-align: middle;
}
div img:nth-of-type(2) {
width: 16px; height: 16px;
}
Nevertheless, keep in mind that this approach will only be effective in browsers that support CSS3 (such as Chrome, Firefox, IE 9). For compatibility with older browsers, alternative options include using JavaScript to iterate over each element or assigning a common class to the images.
Here is a different approach to tackle the issue:
.container img.image1 { margin-left: 5px; vertical-align: middle; }
.container img.image2 { width: 20px; height: 20px; }
<div class="container">
<img src="..." alt="" class="image1" />
<img src="..." alt="" class="image2" />
</div>
I am working with a gsp template that includes a variable. If this variable is true, I want to add an extra button; if it's false, nothing should happen. What could be causing my code to not work correctly? <g:set var="removeButton">{{ removeB ...
I'm looking for a way to center inline-block elements, but I haven't had much luck so far. When I tried using margin-top: x em;, it just moved the image down instead of centering it. The inline-block is intentionally nested inside an image block. ...
I'm currently working on a unique project that involves creating a triangular grid using HTML and CSS. The challenge I am facing is offsetting each triangle in the grid to the left by increasing amounts so they fit seamlessly next to one another. Righ ...
Currently, I have a form with two buttons in a row and an icon (paper clip) that I am attempting to align next to the buttons using UIKit. However, I am facing challenges in getting the alignment right without affecting the size of the elements. Below is a ...
I'm facing a peculiar issue with my HTML/CSS while working on a profile page for a game with a focus on mobile responsiveness. The right-margin seems to persist even though I've tried various solutions. In portrait mode, everything appears fine b ...
Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...
I have been exploring different approaches to achieve this task and it seems like using javascript might be the most effective way. I am currently dealing with a stubborn social icon container placement issue. More details on my previous question can be fo ...
I am currently working with the following JSON data: { "ListNhomThanhTra": [ { "ListKeHoachThanhTra": [ { "ListDoiTuong": [ { "MA_DV_DUOC_TT": "DT01", ...
I'm working with this HTML snippet. <span class="ng-binding" ng-bind="::result.display">All Sector ETFs</span> <span class="ng-binding" ng-bind="::result.display">China Macro Assets</span> <span class="ng-binding" ng-bind ...
Here's a quick overview of the issue I'm facing: http://jsfiddle.net/k2Pqw/4/ Once I adjust the red td width, I'm struggling to revert it back to its original size. Setting it at 25% doesn't dynamically adjust like the other tds, it r ...
My objective is to design a button with multi-line text and an icon positioned centrally next to it for both lines. Refer to the screenshot below for clarification: https://i.sstatic.net/ODPI2.png Despite my efforts, I am encountering difficulty in cente ...
I'm currently working on a floating menu that includes several links. I've successfully applied a CSS style to rotate the menu vertically (-90deg), but I'm facing an issue with the height being greater than desired. How can I reduce the heig ...
I am facing an issue with a JavaScript variable I have, which points to a specific DOM element that I want to display somewhere else within the DOM structure. Here is how it is defined: var salesRep = $("ul.map").attr("id","1"); My goal is to pass this v ...
Struggling with alignment in Bootstrap 5, facing two issues: 1- How to align my icon with the left border of the card body? 2- Increasing the icon size affects the vertical alignment of my card item (see image below) https://i.sstatic.net/dR7DD.png Try ...
I have a fixed sidebar with two ul elements. I attempted to position the blue ul at the bottom of the fixed div, but it is not aligning as intended. <div class="sidebar"> <ul style="background:green;"> <li>test</li> <li>test ...
Looking for assistance with passing a variable from a number input to a PHP page. HTML CODE <input type="number" class="count count-disco" name="quantity_disks" autocomplete="off" placeholder="0"> https://i.sstatic.net/BK3X9.png PHP and JQUERY CO ...
My to-do list is simple and functional, but I'm encountering an unusual issue with the background. The background is supposed to be a random gradient set using JS upon loading the HTML, but sometimes it doesn't apply at all. If you refresh the Co ...
Recently, I've encountered a problem and I'm in search of an answer. Below is some HTML code that I need to work with. My goal is to send a snippet of this HTML to selenium so that it can click on a checkbox. However, I don't want to use the ...
I've encountered an issue with the code I wrote below. It's supposed to display the user's names when they enter their name, but for some reason, the names keep appearing and disappearing immediately. What could be causing this problem? Her ...
Rendering all components or widgets on the page at once can slow down the application's loading time. I prefer to have app-sidebar1, app-body, and app-sidebar2 load onto the DOM sequentially based on priority, rather than waiting for all components t ...