Modificare il selettore *

[evered]

Ciao a tutti,

nell'utilizzare uno script di una galleria di immagini, mi sono imbattuto in un foglio di stile che presenta il selettore *, che per definizione imposta tutta la pagina con i suoi parametri.

Parlo di questo:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}


Io invece voglio che si riferisca solo al div della gallery, ma non ci sono riuscito. Se ad esempio do l'id "boxgallery" al div dove è contenuta la gallery, richiamandolo nel foglio di stile non funziona. Non voglio lasciare il selettore * invece perché mi sposta tutta la pagina di una decina di pixel sulla sinistra.

[deleted_20210415]

Al posto di "*" inserisci "#boxgallery" no?

[evered]

Al posto di "*" inserisci "#boxgallery" no?

No, è proprio questo che intendevo. Non so per quale motivo ma non ne vuole sapere. Ho provato sia come class che come id ma niente.

[mahamatt]

posta anche l'html...

[evered]

posta anche l'html...

<div id="contentimages">


<div class="container demo-4">
<!-- Codrops top bar -->


<div class="main">


<div class="gallery">
<!-- Elastislide Carousel -->
<ul id="carousel" class="elastislide-list">
<li data-preview="images/large/4.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/4.jpg" alt="image04" /></a></li>
<li data-preview="images/large/5.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/5.jpg" alt="image05" /></a></li>
<li data-preview="images/large/6.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/6.jpg" alt="image06" /></a></li>
<li data-preview="images/large/7.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/7.jpg" alt="image07" /></a></li>
<li data-preview="images/large/11.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/11.jpg" alt="image11" /></a></li>
<li data-preview="images/large/12.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/12.jpg" alt="image12" /></a></li>
<li data-preview="images/large/13.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/13.jpg" alt="image13" /></a></li>
<li data-preview="images/large/14.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/14.jpg" alt="image14" /></a></li>
<li data-preview="images/large/15.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/15.jpg" alt="image15" /></a></li>
<li data-preview="images/large/16.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/16.jpg" alt="image16" /></a></li>
<li data-preview="images/large/17.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/17.jpg" alt="image17" /></a></li>
<li data-preview="images/large/18.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/18.jpg" alt="image18" /></a></li>
<li data-preview="images/large/19.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/19.jpg" alt="image19" /></a></li>
<li data-preview="images/large/20.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/20.jpg" alt="image20" /></a></li>
<li data-preview="images/large/1.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/1.jpg" alt="image01" /></a></li>
<li data-preview="images/large/2.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/2.jpg" alt="image02" /></a></li>
<li data-preview="images/large/3.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/3.jpg" alt="image03" /></a></li>
<li data-preview="images/large/8.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/8.jpg" alt="image08" /></a></li>
<li data-preview="images/large/9.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/9.jpg" alt="image09" /></a></li>
<li data-preview="images/large/10.jpg"><a href="#" onFocus='this.blur()'><img src="images/small/10.jpg" alt="image10" /></a></li>
</ul>
<!-- End Elastislide Carousel -->

<div class="image-preview">
<center><img id="preview" src="images/large/4.jpg" /></center>
</div>
</div>


</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">

// example how to integrate with a previewer

var current = 0,
$preview = $( '#preview' ),
$carouselEl = $( '#carousel' ),
$carouselItems = $carouselEl.children(),
carousel = $carouselEl.elastislide( {
current : current,
minItems : 4,
onClick : function( el, pos, evt ) {

changeImage( el, pos );
evt.preventDefault();

},
onReady : function() {

changeImage( $carouselItems.eq( current ), current );

}
} );

function changeImage( el, pos ) {

$preview.attr( 'src', el.data( 'preview' ) );
$carouselItems.removeClass( 'current-img' );
el.addClass( 'current-img' );
carousel.setCurrent( pos );

}

</script>



</div>

[evered]

Prima per far prima ho detto #boxgallery, in realtà il div in questione è #contentimages. Se inserisco lì il codice niente, non va; funziona solo con l'asterisco.

[deleted_20210415]

Provato ad aggiornare la pagina in modalità no-cache (CTRL+F5 su Windows)? Se non va alla prima provalo una decina di volte, e se non funziona nemmeno così, facci risapere

[evered]

Io uso Ubuntu, come faccio? Comunque non so se c'entra qualcosa, dato che togliendo e rimettendo l'asterisco applica o non applica il comando; quindi dovrebbe in caso farlio in automatico anche per il div, no?

[deleted_20210415]

Non capisco scusami, riusciresti a spiegarti meglio?

[evered]

Non capisco scusami, riusciresti a spiegarti meglio?

Dico, su Ubuntu non so come si mette la modalità no-cache. Per il resto, intendo che cosa c'entra la cache in questo caso? Quando utilizzo l'asterisco le vedo le modifiche, poi metto ad esempio #contentimages e invece non succede niente; e se rimett l'asterisco funziona nuovamente.