règles de sélecteur css --ruleset pour tous les éléments d'un sélecteur?

Question

Avec at-rules, il est possible d'avoir un ensemble de règles pour les éléments lors de cet événement (comme l'impression, les appareils mobiles, etc.). Mais qu'en est-il juste pour un sélecteur spécifique?

Je travaille sur une sous-page d'un site plus grand et je dois utiliser la feuille de style principale pour n'importe laquelle de mes pages. Parfois, une règle de style est simplement dépassée par une règle de la feuille de style principale. Pour surmonter cela, je finis par devoir ajouter "#mypage #content blah blah". avant toutes mes règles pour assurer mon css est plus spécifique. Cela devient très vite salissant. Ce que je préférerais faire est quelque chose comme:

@#mypage {
       div {
           border: 1px solid #000;
           }
       div p {
           color: #00f;
           }
       }

afin que toutes les règles que je compose soient contenues dans l'id de la section de la page sur laquelle je travaille.

Oh, j'ai oublié de mentionner, je ne peux pas (si je comprends bien) utiliser @namespace, car ma page se trouve dans un cadre de modèle (d'où la nécessité de la feuille de style principale), donc si je dis simplement @namespace (my-page-url) ma feuille de style écraserait la feuille de style principale.

Est-ce que quelque chose de simple me manque?

Clarification:

Désolé, dans ma tentative de rester simple, j'étais trop vague ...

Je développe le contenu d'une page qui sera placée dans un modèle plus générique (bloc-générique, navigation dans la barre latérale, etc.) qui comporte une feuille de style globale et je n'ai aucun contrôle sur ce contenu.

J'ai un peu de liberté avec la feuille de style pour ma section seulement. Je ne veux pas que mes règles écrasent accidentellement la feuille de style globale et je veux éviter de devoir utiliser des sélecteurs très longs pour mes règles et éviter que la feuille de style globale écrase ma feuille de style. Par exemple, si je veux dire

"toutes les tables ont une bordure noire"

Je risque de placer une bordure noire autour d’une table dans la barre latérale. Cependant, si je dis

"Toutes les tables du div #content ont une bordure noire"

.

cela ne fonctionne que tant qu'ils n'ont pas de règle plus spécifique.

Maintenant, je peux passer en revue chaque règle et ajouter un long train de sélecteurs pour vérifier que chacune de mes règles fonctionne et uniquement pour ma section, mais ce n'est pas vraiment attrayant ni amusant à faire. J'espérais pouvoir imbriquer toutes mes règles dans une règle plus large, comme dans l'exemple ci-dessus, afin de pouvoir avoir une règle principale:

  #content {

    //and place all of my style rules inside of that:



 p {
     border: pink;
   }

de sorte que je n’ai à déclarer ma spécificité qu’une seule fois et qu’elle couvre toutes les règles de cette règle principale.

Answer 1

D'après ce que j'ai lu, la règle suivante correspond au projet de loi, elle n'a qu'un niveau de profondeur et est franchement typique de la plupart des sites Web que j'ai vus et utilisés:

#content div {
  ... your rules ...
}

Cela n'affecterait que les divs situés sous l'élément avec l'identifiant de contenu.

Il n’existe aucun moyen de " grouper " ces règles comme suit:

#content {
  div {
    ... your rules ...
  }
}

Ce serait bien, mais hélas, ce n’est pas ainsi que cela a été écrit.

Answer 2

Ce n'est pas une solution parfaite, car il utilise un traitement côté serveur basé sur PHP, mais cela pourrait vous suffire:

http://www.shauninman.com/archive/2007/06 / 27 / css_server_side_pre_processor

Answer 3

Une question très similaire (avec un titre plutôt médiocre) a été posée il y a un moment.

La réponse la plus populaire a été de Shaun Inman préprocesseur côté serveur (remplacé par CSSCacheer ).

Ma suggestion était Sass .

Dans les deux cas, il s’agit en quelque sorte d’une carence en CSS vanille.

Answer 4

Vous pouvez remplacer l’autre feuille de style avec le symbole "! important". déclaration:

div {
    border: 1px solid #000 !important;
    }
div p {
    color: #00f !important;
    }

Plus d'infos: http://www.w3.org/ TR / CSS2 / cascade.html # règles-importantes

Answer 5

Il existe un moyen de le faire en utilisant un moteur CSS, par exemple. less (bibliothèque node.js).

Selon le site Web (et l'expérience personnelle) de lesscss , vous pouvez imbriquer des règles CSS comme ceci:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

et en utilisant l'utilitaire de ligne de commande less le compile en

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Avec less , vous pouvez également avoir des variables avec des tailles de police, etc., de sorte que les modifications sont beaucoup plus rapides.