Two variations of identical descriptions within a single div container

Is there a way for me to use an item, specifically an img, within the same div class but with different definitions?

For example:

section .row img {
    margin: 0 0 30px;
    width: 100%;
    border: 4px solid #18a00e;
}

section .row img {
    margin: 0 0 30px;
    border: 4px solid #18a00e;
    max-height: 300px;
}

I'm having trouble ensuring that both of these definitions are applied without one overwriting the other. Any suggestions? Thank you.

Additional information (for clarification):

//HTML code scenario 1 requiring width: 100%//
<section class="container">
    <div class="row">
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
           <img src="img/m3.jpg"/>
        </figure>
    </div>
</section>

//HTML code scenario 2 needing max-height: 300px//
<section class="jumbotron">
    <div class="unlockedl">
        <div class="row">
            <img src="img/pm1.jpg"/>
        </div>
    </div>
</section>
htmlcss

Answer №1

To uniquely target specific elements, utilize classes such as .container and .jumbotron to style the .row img within those sections rather than using a generic section.

.container .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px solid #18a00e;
}

.jumbotron .row img {
  margin: 0 0 30px;
  border: 4px solid #18a00e;
  max-height: 300px;
}
<section class="container">
  <div class="row">
    <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <img src="img/m3.jpg" />
    </figure>
  </div>
</section>

<section class="jumbotron">
  <div class="unlockedl">
    <div class="row">
      <img src="img/pm1.jpg" />

    </div>
  </div>
</section>

In addition, you can introduce other unique classes/elements like figure and .unlockedl in these sections.

section figure img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px solid #18a00e;
}

section .unlockedl img {
  margin: 0 0 30px;
  border: 4px solid #18a00e;
  max-height: 300px;
}
<section class="container">
  <div class="row">
    <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <img src="img/m3.jpg" />
    </figure>
  </div>
</section>

<section class="jumbotron">
  <div class="unlockedl">
    <div class="row">
      <img src="img/pm1.jpg" />

    </div>
  </div>
</section>

Alternatively, employ :nth-child() to target individual sections specifically.

section:nth-child(1) .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px solid #18a00e;
}

section:nth-child(2) .row img {
  margin: 0 0 30px;
  border: 4px solid #18a00e;
  max-height: 300px;
}
<section class="container">
  <div class="row">
    <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <img src="img/m3.jpg" />
    </figure>
  </div>
</section>

<section class="jumbotron">
  <div class="unlockedl">
    <div class="row">
      <img src="img/pm1.jpg" />

    </div>
  </div>
</section>

Answer №2

It is recommended to give each element a unique id and apply the css styles accordingly

 <div id ='uniqueId1'  class='common_class'>    </div>
 <div id='uniqueId2'  class='common_class'>     </div>


#uniqueId1 {
  width: 100%;
}

#uniqueId2 {
  max-height: 300px;
}

.common_class{
   margin: 0 0 30px;
   border: 4px solid #18a00e;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to make a gradient fill and rounded border with CSS?

I am interested in creating a gradient and rounded border similar to the top bar on Instagram. Although I know how to create a rounded and solid border, this one utilizes a gradient. It appears that Instagram uses a canvas, but I am wondering if it can b ...

htmlcssfrontend

Discovering elements with Selenium

While using selenium, I stumbled upon this web element: <td style="padding-right: 10px; " **onclick="javascript:show_me('CarDetails.php?CarID=2358912&SubCatID=1**', '2358912', 560, 'ActiveLinkVisited');stat( '../& ...

javajavascripthtmldomselenium

Activating text wrapping functionality

My current project involves converting HTML to PDF using jsPDF. In order to ensure that every word appears in the exact location as it does in the original HTML, I decided to wrap each word in <span> tags. Specifically, I have a font tag (not added b ...

javascriptcssword-wrap

Encountering difficulties with implementing and utilizing bootstrap in Symfony 5.3 with Encore plugin

While I am currently dealing with an older version of Symfony, I decided to create a new 5.3 Symfony application from scratch. However, I am facing difficulties when trying to integrate bootstrap into it. After consulting some documentation, I proceeded to ...

javascriptphpcsstwitter-bootstrapsymfony

When the HTML and PHP code keeps running, the JavaScript text on the page updates itself

I was experimenting with threading in different languages like Java, PHP, and JavaScript. I am aware that JavaScript is single-threaded and PHP lacks robust threading capabilities. Below is the code snippet I have been working on: <body> <p id= ...

javascriptphphtml

Align Image According to Dimensions of the Browser

I'm looking for a way to dynamically position an image based on the width and height of the browser within an HTML file. I know that adjusting an image's width/height is possible through code like this: <script> ...

javascriptjqueryhtmlcss

Creating a unique-looking visual representation of progress with arcs

Looking to create a circular progress bar (see image below), with loading starting from the left bottom side up to the right bottom side. The empty state should be light-blue (#E8F6FD) and the progress color strong blue (#1CADEB). https://i.sstatic.net/VZ ...

javascriptcsssvgcss-shapes

Enhancing user input with multiple values in a textarea using JSTL

I'm having trouble inputting multiple values into a textarea using JSTL. Here is the coding snippet I am using: <label>Resources</label> : <c:forEach items="${MEETING_ENTITY}" var="resource"> <textarea id ...

javascripthtmlforeachjstl

Trouble with sending SMTP emails from Flask app (Error 500)

Currently, I am in the process of developing a website using Python and Flask where I have successfully implemented a Contact Form Modal. The modal opens up smoothly allowing me to fill it out (many thanks to the supportive community <3), however, upon ...

htmlflaskbootstrap-5flask-mail

What causes images to expand automatically when selected in my JavaScript gallery?

I am struggling with a simple JS gallery of images where I want to display a large image at the top and small thumbnails below it. The issue I am facing is that when I hover over an image in the thumbnail section, the big image changes as expected. However ...

javascripthtml

The backgroundImage function is having trouble locating the specified URL path

I'm struggling to set a backgroundImage because it's not recognizing the local path URL. Here is my code snippet: import { makeStyles } from '@material-ui/core/styles'; const loginWrapperStyles = makeStyles(theme => ({ image: { ...

cssreactjsmaterial-ui

How can I switch the visibility of two A HREF elements by clicking on one of them?

Let me break it down for you in the simplest way possible. First off, there's this <a href="#" id="PAUSE" class="tubular-pause">Pause</a> and then we have a second one <a href="#" id="PLAY" class="tubular-play">Play</a> Al ...

javascriptjqueryhtmlcsstubular

Opacity: When the value is set to 0, the element remains invisible even when hovered over

I'm encountering an issue with configuring an element to have absolute positioning and a width and height of 100% while setting its opacity to 1.0. To summarize, here is the HTML code I am working with: <ul class="properties"> <li style ...

htmlcss

Waiting for response in AngularJS Controller and setting callback

I have developed an AngularJS application with controllers.js and factories.js that I am excited about. However, I am facing a challenge when trying to manipulate the values within the controller (retrieved from the factories). The issue is that these val ...

javascripthtmlangularjs

Eliminate viewed alerts by implementing a scrolling feature with the help of Jquery, Javascript, and PHP

My goal is to clear or remove notifications based on user scrolling. The idea is to clear the notification once the user has seen it, specifically in a pop-up window for notifications. I am relatively new to Javascript/jQuery and feeling a bit confused abo ...

javascriptphpjquerycsswordpress

Troubleshooting problems with forms using Bootstrap and HTML

I could use some assistance with a problem I'm facing while trying to acquire new skills through learning. I would like my picture and forms to resemble the one in this image: enter image description here index.html <div class="jumbotron"> &l ...

htmlcsstwitter-bootstrap

Corner of the Border Revealing a Clear Sky above

Looking to enhance my navigation bar (menu) by adding a cornered border when the user hovers over it. <nav> <a href="#home">Home</a> | <a href="#about">About</a> | <a href="#blog">Blog</a ...

css

Unable to sort the list items when utilizing the load() function

I have multiple li elements within a ul and I am using the following code to sort them in ascending order based on the data-percentage attribute: $(function() { $(".alll li").sort(sort_li).appendTo('.alll'); function sort_li(a, b) { re ...

javascripthtmljquery

Strange behavior observed in fading slides using jQuery

I have been experimenting with jQuery to create a slide feature. However, I am encountering an issue where the next slide fades in before the previous one completely fades out when I click the next arrow. Does anyone know how to fix this problem? <ht ...

jqueryhtmlcss

Insert the ng-if directive into an element using a directive

I am working on an AngularJS directive that involves looking up col-width, hide-state, and order properties for a flexbox element based on its ID. I want to dynamically add an ng-if=false attribute to the element if its hide-state is true. Is there a way ...

javascripthtmlangularjsangularjs-directive