CSS wild card pour le complexe de l'ID

Si j'avais un sélecteur css comme #subtab-1, #subtab-2 etc

J'ai pu faire le générique du sélecteur de cesdiv[id^='subtab-']

Mais je ne peux pas comprendre comment faire une wild card pour les sélecteurs comme 

#subtab-1-sub1, #subtab-1-sub2, `#subtab-1-sub2, #subtab-2-sub1, #subtab2-sub2, #subtab2-sub-3

etc... comment pouvez-vous faire quelque chose comme div[id^='sous-onglet-onglet-'] (*=génériques)

  • Vous devez modifier la question et de tenter de clarifier. À partir de votre commentaire sur les Musa de réponse, je suppose que vous essayez de créer un sélecteur qui permet de sélectionner tous les id qui correspondent à quelque chose comme l'expression régulière subtab-[0-9]+-sub[0-9]+? Un échantillon de l'actuelle structure HTML pourrait l'aider, et aussi de savoir si le changement de cette structure est une option.
  • Malheureusement, les données sont à venir à partir d'un back-end que je n'ai pas d'architecte et ne peut pas modifier. L'une de ces situations.Oui vous avez raison sur les regex
InformationsquelleAutor Dirty Bird Design | 2013-05-02
  1. 12

    Si je suis la compréhension de votre question correctement, vous essayez de sélectionner tous les éléments dont l'id commence par subtab- suivi d'un nombre, suivi par -sub suivi par un autre nombre. On dirait également que vous souhaitez que cette sélecteur de ne pas correspondre #subtab-1, seules les choses qui ont un suffixe comme #subtab-1-sub1.

    Cela ne peut être fait avec les CSS. CSS ne pas fournir une sélecteur qui permettra à des caractères génériques. Vous pouvez cependant hack quelque chose ensemble qui est assez proche.

    Hacky sélecteur qui pourraient travailler

    [id^="subtab-"][id*="-sub"] correspond à n'importe quel id qui commence avec subtab- et contient également -sub quelque part dans l'id. Ce sera sans doute, mais peut provoquer des faux positifs sur des choses comme #subtab-1-subtle ou #subtab-something-sub2, #subtab-sub, etc.

    Un autre hacky sélecteur qui pourraient travailler

    Faisant l'hypothèse que #subtab-?-sub? éléments sont toujours contenues à l'intérieur de #subtab-? éléments et que #subtab-? éléments ne peut jamais contenir un autre #subtab-? élément, vous pouvez utiliser le enfant combinator de les cibler: [id^="subtab-"] > [id^="subtab-"]

    En s'appuyant sur une classe au lieu

    Un meilleure solution serait probablement à donner tous les éléments que vous essayez de cibler une commune classe, par exemple <div class="subtab-sub">, puis en sélectionnant toutes serait aussi facile que de .subtab-sub. À l'aide d'une classe serait également obtenir beaucoup de meilleures performances que d'utiliser sélecteur d'attribut.

    • Après un peu de modification, cela a fonctionné "div[id^="sous-onglet-"] > [id^="onglets-"]" Merci beaucoup pour l'idée d'un sélecteur d'enfant w/caractères génériques. Très cool.
    InformationsquelleAutor Useless Code
  2. 2

    Tous les id de commencer avec subtab donc utiliser 

    div[id^='subtab']
    • Je ne pense pas que j'ai été assez clair, désolé! Je ne veux pas influencer "#sous-onglet-1" seulement "#sous-onglet-WC-subWC" WC=Génériques, DONC n'aime pas "les astérisques" dans le code
    InformationsquelleAutor Musa
  3. 0

    Je ne suis pas sûr que vous voulez utiliser les Id construit dans ce mode comme un moyen de traiter les éléments dans votre code HTML. J'aimerais expérimenter l'utilisation de classes telles que subsubtab, et vous pouvez essayer d'utiliser le nth-child pseudo-classe, individuellement, de l'adresse de sous-onglets ou subsubtabs:

    <div class="tabs">
   <div class="subtab">
     <div class="subsubtab">...</div>
     <div class="subsubtab">...</div>
     ...
   </div>
   <div class="subtab">
     ...
   </div>
</div>

    Ensuite, votre CSS ressemblerait

    div.subsubtab { color: brown; }

    ou

    div.subtab:nth-child(2) { border: 1px solid red; }
    • Oui, c'est certainement pas idéal, mais est-ce que j'ai à travailler avec. De retour fin est tenu w/ducttape et de l'est de l'héritage et ne sera pas modifié. Im chargée des morceaux de travail.
    InformationsquelleAutor
  4. -1

    Regarder dans cette Sélecteur jQuery


    Je pense que ça peut fonctionner.

    InformationsquelleAutor MISJHA