26852 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,

Comme je le mettais dans un autre sujet, j'ai une page HTML avec 2 formulaires d'inscription à une newsletter (un dans le corps, l'autre dans le pied de page).
Voici le code HTML du premier formulaire :
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-2">
            <div class="agenda">
                <h2>L'agenda</h2>

            </div>
        </div>
        <div class="col-md-3">
            <div class="newsletter">
                <h2>Inscription à la newsletter</h2>
                <div id="node-1326" class="dp-node dp-node-newsletter dp-node-1326 clearfix node-item node-newsletter node-item-tagged" data-item-tags="">
                    <div class="clear"></div>
                    <h3>Inscrivez-vous</h3>
                    <hr>
                    <div class="node-item-content node-item-content-">
                        <div class="node-item-teaser"></div>
                        <p></p>
                        <form id="newsletter" class="form-vertical" enctype="application/x-www-form-urlencoded" action="" method="post">
                            <div class="form-group">
                                <label for="newsletters" class="optional">Lettres d'informations auxquelles je souhaite m'inscrire :</label>
                                <select id="newsletters" name="newsletters[]" multiple="multiple" class="" style="display: none;"></select>
                                <div class="btn-group">
                                    <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="-- Aucune --" aria-expanded="false"><span class="multiselect-selected-text">-- Aucune --</span> <b class="caret"></b></button>
                                    <ul class="multiselect-container dropdown-menu">
                                    </ul>
                                </div>
                                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
                                <script type="text/javascript">
                                    $(document).ready(function() {
                                        $('#newsletters').multiselect({
                                            nonSelectedText: '-- Aucune --',
                                            includeSelectAllOption: true,
                                            selectAllText: 'Tout sélectionner',
                                            numberDisplayed: 1,
                                            allSelectedText: 'Toutes les lettres',
                                            nSelectedText: 'lettres sélectionnées'
                                        });
                                    });
                                </script>
                            </div>
                            <div class="form-group">
                                <label for="mail" class="required">Mon adresse e-mail</label>
                                <div class="input-group" style=""><span class="input-group-addon"><i class="fa fa-at"></i></span>
                                    <input type="email" value="" id="mail" class="form-control " placeholder="" name="mail" required="">
                                </div>
                            </div>
                            <input type="submit" name="submit_newsletter" id="submit_newsletter" value="S'inscrire" class="btn btn-primary">
                        </form>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Sachant que je ne peux pas intervenir sur le code HTML après <h2>Inscription à la newsletter</h2> (car après c'est appelé dynamiquement grâce à une variable type {%variable%}) je souhaiterai sélectionner le bouton submit de ce premier formulaire afin d'en changer la couleur.
Pour cela, et pour le sélectionner lui et pas celui qui est dans le footer, j'ai entré le CSS suivant :
div.container-fluid div.row div.col-md-3 div.newsletter div[id^="node"].dp-node.dp-node-newsletter[class^="dp-node"].clearfix.node-item.node-newsletter.node-item-tagged div.node-item-content.node-item-content- form#newsletter.form-vertical div.form-group input#submit_newsletter.btn.btn-primary {
    border: solid 1px #e6e6e6;
    background-color: #e3001a !important;
    color: white !important;
}

Quand je calcule la spécificité de ce code CSS j'arrive à un "score" de j'arrive à 2 18 9 (2 ID, 18 classes et 9 éléments ou pseudos-éléments).
Pourtant, bah... rien ne se passe, j'arrive pas à sélectionner ce bouton.

Notez au passage que je demande de sélectionner un id commençant par "node" et une classe commençant par "dp-node" afin que ce soit dynamique car N° de nœud est susceptible de changer.

Savez-vous pourquoi je n'arrive pas à sélectionner ce bouton malgré un bon score de spécificité ? Comment faire pour le sélectionner sans toucher au HTML, en passant par le CSS (voire JS) ?

D'avance merci pour votre réponse.
Bonne journée Smiley cligne
Ce sélecteur est effrayant?!
Mais il y a une erreur dedans : l’élément que vous voulez atteindre n’est pas dans une div.form-group mais à côté. Je l’ai enlevé et ça a marché. Mais je pense que vous pourriez l’alléger.
Meilleure solution
@Anedja
Merci beaucoup Smiley merci Smiley thumpup
Quel boulet ! (je parle de moi bien sûr) J'avais pas vu que la div form-group était au même niveau que l'input submit_newsletter Smiley nimp Ça ne risquait pas de marcher, c'est sûr Smiley lol

Encore merci
Bonne journée Smiley cligne
Modifié par spip93 (10 Nov 2019 - 22:08)
Anedja a écrit :
Ce sélecteur est effrayant?!
Mais il y a une erreur dedans : l’élément que vous voulez atteindre n’est pas dans une div.form-group mais à côté. Je l’ai enlevé et ça a marché. Mais je pense que vous pourriez l’alléger.

Nous sommes obligés de voir de telles horreurs de nos jours Smiley angryfire
Et on présente cela comme du travail de professionnel
...
En usines à gaz, dirons-nous.
Alors que cette simple règle CSS aurait suffit :
#submit_newsletter.btn.btn-primary {
    border: solid 1px #e6e6e6;
    background-color: #e3001a !important;
    color: white !important;
}

Mais cela justifiera certainement moins le montant de la facture.

Et que dire de ces <script> en plein milieu de la la page qui vont ralentir son chargement.
Modifié par bazooka07 (11 Nov 2019 - 00:18)
Sinon, il faut utiliser l'inspecteur (ctrl+shift+i) de ton navigateur pour déterminer le sélecteur a appliquer. Tu n'as qu'a sélectionner l'élément que tu veux modifier et tu auras l'ensemble des sélecteur et la cascade qui lui sont appliqués.

Et !important c'est le mal absolu sauf si absolument nécessaire (donc pour les styles inline ou si quelqu'un a déjà utilisé important).
bazooka07 a écrit :

Alors que cette simple règle CSS aurait suffit :
#submit_newsletter.btn.btn-primary {
    border: solid 1px #e6e6e6;
    background-color: #e3001a !important;
    color: white !important;
}


Et non, ça ne fonctionne pas. Du coup, ça affecte mes 2 boutons submit, et pas uniquement le 1er. Tu penses bien que j'ai commencé par là Smiley lol avant de complexifier la chose.

bazooka07 a écrit :
Et que dire de ces <script> en plein milieu de la la page qui vont ralentir son chargement.

J'ai pas la main là-dessus.
A partir de col-md-3, c'est du code HTML généré dynamiquement grâce à une variable. C'est pour ça que je passe par le CSS pour modifier la mise en forme de cette partie-là.

bacasable a écrit :
Sinon, il faut utiliser l'inspecteur (ctrl+shift+i) de ton navigateur pour déterminer le sélecteur a appliquer. Tu n'as qu'a sélectionner l'élément que tu veux modifier et tu auras l'ensemble des sélecteur et la cascade qui lui sont appliqués.

C'est ce que j'ai fait. C'est ce que je fait d'habitude. Le problème, c'est que ça affectait les 2 boutons submit, et pas uniquement le 1er. C'est pour ça que j'ai cherché à être le plus spécifique possible en remontant dans l'arborescence. Après le message d'Anedja, j'ai cherché à simplifier le sélecteur, mais je l'ai pas allégé tant que ça finalement.

bacasable a écrit :
!important c'est le mal absolu sauf si absolument nécessaire (donc pour les styles inline ou si quelqu'un a déjà utilisé important).
Je suis tout à fait d'accord avec toi. Dans la mesure du possible, j'essaye de les éviter au maximum, mais là, la règle avait déjà été appliquée dans une autre feuille de style sur laquelle j'ai pas la main dessus.
Ma marge de manœuvre est assez limitée, entre le html généré dynamiquement et des feuilles de style appelées à gauche à droite ... Smiley confus

En tout cas, merci de votre aide et de vos conseils.
Modifié par spip93 (11 Nov 2019 - 10:55)
spip93 a écrit :

Je suis tout à fait d'accord avec toi. Dans la mesure du possible, j'essaye de les éviter au maximum, mais là, la règle avait déjà été appliquée dans une autre feuille de style sur laquelle j'ai pas la main dessus.
Ma marge de manœuvre est assez limitée, entre le html généré dynamiquement et des feuilles de style appelées à gauche à droite ... Smiley confus


Dans ce cas là tu peux juste faire un sélecteur plus fort en ajoutant body a ton sélecteur par exemple :
https://codepen.io/bacasable/pen/YzzjrGv