Comment puis-je styliser cela en CSS? – HTML & CSS – Forums SitePoint

Comment puis-je styliser cela avec css:

 <div class="content pt_shadow" >

J’ai essayé .content pt_shadow { … }

et .pt_shadow { … }

toute aide est la bienvenue

SamA74

4 novembre 2022, 20h11


#2

.pt_shadow { … }

Ce deuxième devrait le faire.
Le premier sélecteur ne correspond pas à cet élément.

1 J’aime

Merci pour votre réponse.

Ainsi, sur la page php/html, j’ajoute ce style à la classe et il apparaît à la fois sur ordinateur et sur mobile :

<div class="content pt_shadow" style="background-color:#000000;">

mais quand je supprime ce style et l’ajoute au fichier/page (entre les balises de style):

  @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
   .pt_shadow {
   background-color:#800000;
 }
   }

Je ne vois pas la couleur d’arrière-plan ajoutée sur mobile.

Qu’est-ce que je rate?

SamA74

4 novembre 2022, 20h38


#4

style="background-color:#000000;

Lorsque vous utilisez un style en ligne, il remplacera les styles dans CSS.
La meilleure option consiste à supprimer tout style en ligne et à tout mettre en CSS.
Si ce n’est pas une option, vous pouvez utiliser !importantmais ce serait un dernier recours pour moi.

Merci encore pour votre réponse.
Oui, ce que j’ai décrit plus tôt, c’est que j’ai supprimé le style en ligne et ajouté le css réactif, mais je n’ai rien vu #800000 Couleur de l’arrière plan. Donc, j’ai ajouté ceci (ci-dessous) en haut du fichier/page et toujours pas de couleur d’arrière-plan.

<style>
  @media only screen and (min-device-width: 375px) and (max-device-height: 812px){
   .pt_shadow {
   background-color: red !important;
}
}
</style>

toute autre idée est appréciée

PaulOB

5 novembre 2022, 9h40


#6

Cette requête média n’a aucun sens car elle est trop spécifique et la largeur et la hauteur de l’appareil sont obsolètes de toute façon et ne devrait pas être utilisé.

Qu’essayez-vous de cibler exactement ?

Si vous ciblez de petits écrans, utilisez une requête multimédia de largeur maximale à environ 600 pixels.

@media screen and (max-width: 600px) {
  .content.pt_shadow {
    background-color: red;
  }
}

Cependant, cela ne fonctionnera toujours pas si vous placez le code avant tout code d’origine pour cet élément de même poids. Ou si vous placez ce code après le code d’origine mais que le code d’origine a plus de poids.

Par exemple, si le code d’origine était #section .content.pt_shadow {}, vous devrez alors faire correspondre ce poids dans votre règle suivante.

La méthode la plus simple consiste à regarder dans devtools et à trouver la règle qui s’applique à l’original et à la copier à partir du panneau devtools, puis à l’utiliser.

!important ne doit être utilisé que pour remplacer les styles en ligne ou d’autres cas vraiment particuliers. Il n’est pas utilisé parce que vous ne savez pas pourquoi vous en avez besoin.

2 J’aime

très utile… merci encore

1 J’aime

— to news.google.com