jquery .load() called then css not working

Question

I have created an image gallery of thumbnails using a carousel. Each gallery corresponds to a city, and the load function is used to replace the gallery with a different city.

For example:

<div class="replace">
    <div class="prev_box"><div class="prev"><p> < </p></div></div>
    <div id="thumbs">
        <div class="pic"><img src="NYC/img1.jpg" alt="">  </div>
        <div class="pic"><img src="NYC/img2.jpg" alt=""></div>
        <div class="pic"><img src="NYC/img3.jpg" alt=""></div>
    </div>
    <div class="next_box"><div class="next"><p> > </p></div></div>
</div>

The carousel and load functions are then implemented at the bottom to replace the gallery when necessary.

<script>
    $(document).ready(function() {
        $( ".NYC" ).click(function() {
            $(".replace").load( "Galleries.html #NYC" );
            $(".prevgallery").removeClass('active');
            $(".NYC").addClass('active');
        });
        $( ".LA" ).click(function() {
            $(".replace").load( "Galleries.html #LA" );
            $(".prevgallery").removeClass('active');
            $(".LA").addClass('active');
        });
    });
</script>

The simple carousel is implemented via "slick" as follows:

<script type="text/javascript">
    $(document).ready(function(){
        $('#thumbs').slick({
            infinite: false,
            slidesToScroll: 3,
            slidesToShow: 7,
            prevArrow: $('.prev_box'),
            nextArrow: $('.next_box')
        });
    });
</script>

The CSS is as follows to keep the images a certain size:

#thumbs {
    display: inline-block;
    height: 90px;
    width: 670px;
    border: 1px solid red;
}

#thumbs div .pic {
    height: 80px;
    margin: 5px 0px 5px 0px;
    border: 1px solid green;
}

#thumbs div .pic img {
    height: 100%;
    width: auto;
    cursor: pointer;
} 

The CSS code works correctly for the original city, such as NYC. But the strange thing that happens is when another city such as LA is loaded into the html file to replace the "replace" div, the CSS file doesn't seem to effect the new div.

The following code is found in Galleries.html

<div class="replace" id="LA">
    <div class="prev_box"><div class="prev"><p> < </p></div></div>
    <div id="thumbs">
        <div class="pic"><img src="LA/img1.jpg" alt=""></div>
        <div class="pic"><img src="LA/img2.jpg" alt=""></div>
        <div class="pic"><img src="LA/img3.jpg" alt=""></div>
    </div>
</div>

Answer 1

try to change your CSS rules from div .pic to div.pic

#thumbs div.pic { 
  /* .... */
}

and

#thumbs div.pic img { 
  /* .... */
}