1

Hi I'm stuck in a very big problem I have created a slide show from the help of internet It is working perfectly but it uses an external CSS file when I use that file so It disturbs my all elements I want to apply this CSS file to a particular div only.

Here is my HTML:

<div id="foo">

<div style="overflow-x: scroll;" class="columns">

{% for story in stories %}
  <div style="padding-right: 9px;">
    <a name="{{ story.id }}" class="showModal">
    <figure class="image is-128x128">
      <img class="is-rounded" src="{{ story.user.profile.profile_pic.url }}">
    </figure>
    <div class="media-content has-text-centered">
      <p class="title is-6">{{ story.user.username }}</p> 
    </div>
    </a>
  </div>
{% endfor %}

  </div>


<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p id="storiestitle" class="modal-card-title"> </p>
      <button id="closeModal" class="delete" aria-label="close"></button>
    </header>
        <!-- Slideshow container -->

    <section class="modal-card-body">
    <div class="slideshow-container">

      <!-- Full-width images with number and caption text

      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="{% static 'img/background1.jpg' %}" style="width:100%">
        <div class="text">Caption Text</div>
      </div> -->

      <div id="jsondata"></div>




      <!-- Next and previous buttons -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    </section>

    </div>

  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

</div>
<be>

My css file link:

<link rel="stylesheet" href="{% static 'css2/bulma.min.css' %}">

I want to apply this CSS file to a particular div only without disturbing other div(s).

Tim Hunter
  • 826
  • 5
  • 10
Shikeb Khan
  • 11
  • 5
  • Maybe what I know, CSS files collide with previous CSS. It is better if you do "Inspect Element" and then take certain parts that are inside the Bulma CSS. – Adhitya Nov 10 '20 at 17:32
  • 1
    Does this answer your question? [Link external CSS file only for specific Div](https://stackoverflow.com/questions/26263616/link-external-css-file-only-for-specific-div) – freedomn-m Nov 10 '20 at 17:46
  • You could also put the css+div in an iframe - css in iframe only affects that iframe – freedomn-m Nov 10 '20 at 17:47
  • thanks, a lot sir but I have made my own CSS file for that purpose. – Shikeb Khan Nov 13 '20 at 08:49

3 Answers3

0

I'm not aware of a way to apply a stylesheet to certain elements only, so you have to change css file itself to do what you want ... target the div you want to change by class, or if necessary give it an id and use an id selector in the css.

geofh
  • 535
  • 3
  • 15
0

You can use inline CSS for that for detailed information you can visit : How to add CSS

Or, you can change the whole CSS and target the div you want to change, use id to get better result.

Ashish Maurya
  • 59
  • 2
  • 9
0

Hi Man i hope you are well, currently you can apply stylesheet for one element but you can apply it for certain media query only that you refere in the link style

 <link rel="stylesheet" media="screen and min-width(750px)" href="{% static 'css2/bulma.min.css' %}">

to solve your problem try to be more specific to select in your element by Ids or you can test your element by adding !important :

display: inline-block !important;//Make sure to test add !important after each value  if it works turn selecting By ID Or inline style ,styling from Html
Mahdi-Soultana
  • 144
  • 1
  • 9