-2
votes

Comment sélectionner le premier descendant de type spécifique avec sélecteur CSS en HTML complexe

J'ai besoin de localiser un élément code> dans un document HTML très long et complexe. L'élément code> a un ancêtre

code> avec un attribut d'identification. Voici un exemple d'extrémité de ce que je décris: xxx pré>

Je veux localiser l'élément code> avec la valeur du "nom de famille" P " >

Je pense que je le ferais en trouvant la racine

code> par son identifiant, puis pour trouver son deuxième descendant de type code> code> p>

J'imagine que cela pourrait ressembler à ceci: p> xxx pré>

pour localiser le "prénom" code> i 'D Simplement faire: P>

#root input {
    some styling
    }


3 commentaires

Est-ce votre mise en page HTML actuelle? Ou est-ce l'entrée dans un autre conteneur? Si le premier, vous pouvez essayer #root entrée: premier enfant


La mise en page réelle provient de .jsx comme l'application a été développée dans la bibliothèque de réaction. J'ai inclus cela comme un exemple d'extrait


Vous avez ajouté [selenium] et [tests automatisés] Tags à cela, mais je ne vois aucune référence à les utiliser.


3 Réponses :


1
votes

Je ne sais pas si c'est ce que vous voulez. Ceci sélectionne la première entrée INTERNET INTERNE INTERNE #ROOT.

#root input[value="First Name"] {
    background: red;
}


2 commentaires

Je veux sélectionner l'entrée qui a la valeur "prénom" mais idéalement sans utiliser le [valeur = "prénom"] comme non tous les éléments que je dois localiser ont une certaine valeur


OK, alors mes premiers sélecteurs et @pete Selectors doivent faire le travail.



2
votes

Si vos entrées sont comme dans votre exemple, vous pouvez utiliser premier-enfant code>:

p>

<div id="root">
    <header>
        <h1>Hello World</h1>
    </header>
    <div>
        <div>
            <form>
                <div>some other elements</div>
                <input value="First Name">
                <div>some other elements</div>
                <input value="Last Name">
                <div>some other elements</div>
            </form>  
        </div>
    </div>
</div>


7 commentaires

Puis-je dire #root entrée: deuxième type ?


# Entrée # NTH-of-Type (2)


Si vous voulez autre chose que d'autre que le premier ou le dernier, ce serait nth - par exemple nième de type (2) ou nième enfant (2)


Donc, lorsque vous utilisez NTH-of-Type , les éléments ne doivent pas nécessairement être des frères et sœurs du tout?


Oui, ils font: le pseudo-classe de type: NTH-de type () CSS correspond à des éléments d'un type donné, basé sur leur position parmi un groupe de frères et sœurs.


Donc, si les deux éléments sont tous deux enveloppés dans leurs propres éléments div , le nième de type n'est pas valide. Savez-vous de quoi que ce soit d'autre que je puisse utiliser à la place?


Lire ma réponse correctement - cela vous donne ce scénario et créer un exemple de reproductible minimal avec votre structure HTML actuelle afin que nous ne gaspillent pas de cinquante questions sur quelque chose que vous n'avez pas montré



0
votes

Pour sélectionner l'entrée avec la valeur "Nom" Utilisez le sélecteur CSS ci-dessous.

#root input[value="Last Name"] {
    background: red;
}


0 commentaires