. WebdeZign
web design, intégration web et WordPress

#ID & .class combinées > la sélection de l’élément désiré en CSS3

Je suis actuellement occupée à la construction d’un thème WordPress de A à Z, avec en arrière-plan un framework (Zurb Foundation) et un ‘template’ de base généré par Underscores_. Je procède ainsi pour les possibilités de mise en page plus aisée déjà intégrées dans une base WordPress.

Pour suivre mes avancées avec Zurb Foundation et Underscores_ rendez-vous dans la catégorie LAYOUT & frameworks.

Ajouter un framework et un template n’enrichit pas seulement la mise en page d’un site. Condition sine qua non, cela enrichit d’autant (voire plus !) les styles actifs au chargement de la page.

Pour moi qui aborde les ‘stations intermédiaires’ a posteriori (c’est-à-dire après la découverte de WordPress), je n’ai pas les bases fondamentales propres à l’HTML et au CSS et je dois donc souvent dépatouiller comment faire pour styliser telle partie ou telle autre, sans toucher aux autres ^^

C’est là que la combinaison des sélecteurs en CCS3 permet de pointer très précisément un élément, sans toucher aux autres, proches ou très similaires.

Voici quelques liens à ce sujet (plus ou moins récents) :

Je profite de ce billet consacré à HTML5/CSS3 pour donner des adresses internet incontournables dans l’apprentissage de ces disciplines, prioritairement dans la langue de Molière mais pas seulement.

Les fondamentaux HTML/CSS du web

  • sur Wikipedia, plus précisément sur Wikibooks : HTML et CSS
  • LA référence, en matière d’apprentissage et de référence des langages utiles à la construction de sites : W3Schools

w3schools-sections

  • un article Le tao du design Web pour introduire un site à suivre, sous-titré « Webdesign pompé à la source » : Pompage.net
  • le site YoyoDesign propose des traductions françaises de documents issus de w3c.org (the World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
  • d’autres sites à explorer mentionnés (ou pas) sur Wikibooks :
    • ZONECSS
    • XUL.fr (traite de HTML, de CSS, de Javascript et d’Ajax)
  • des lieux virtuels (ou pas) de formation, très riches en infos :
  • Et plein de blogs aisément identifiables dès le moment où l’on s’attarde un peu à décortiquer les articles qui proposent souvent des liens liés … On sait où on commence, on ne sait pas où on finit ^^ !

A moi maintenant de compiler un résumé utile à la mémorisation des combinaisons de sélecteurs en CSS3.

Pointer vers un sélecteur CSS précis

Je vais prendre l’exemple sur le présent site, et le présent article. Comment pointer vers le H3 que j’utilise ici pour sous-titrer mes articles ? Faisons pour l’instant abstraction du fait que ce que je viens de dire risque d’ouvrir à nouveau le débat autour de la hiérarchie des titres et sous-titres h1, h2, h3 dans une page web … ^^ Je ne m’intéresse qu’à la manière de pointer vers ce H3, et que vers lui.

En utilisant l’inspecteur de code (je suis sous Firefox Mac), je diagnostique la ligne qui pointe en CSS vers une règle contenue dans la feuille de style de Bootstrap (sur WebDeZign.cH, le thème fait appel au framework Bootstrap, et non à Zurb Foundation, c’est ainsi …). Je cherche dans cette liste si H3 est représenté pour les deux classes identifiées « post-container » et « content ». Non ! Cela signifie qu’il me suffit d’ajouter dans MA feuille de style une ligne de propriété CSS ainsi : .post-container .content h3 {margin-top désiré}. Je désigne ainsi un sélecteur très précis : le sous-titre de niveau 3 dans le conteneur (div) ‘content’, lui-même inclus dans le conteneur (div) ‘post-container’.

capture d'écran webdezign.ch

Styliser une balise HTML selon son emplacement est l’exemple le plus simple et le plus courant, avec celui qui consiste à styliser de la même manière une ID. Mais selon qu’elle est combinée avec une ou plusieurs classes ‘simultanées’, les combinaisons sont multipliées d’autant et CSS3 prévoit des sélecteurs très précis. Retour sur l’article mentionné en début de billet : Les sélecteurs CSS2 et CSS3

extrait de l'article 'Les sélecteurs CSS2 et 3' sur le site http://xul.fr

extrait de l’article ‘Les sélecteurs CSS2 et 3’ sur le site http://xul.fr

Tita

Conceptrice & CEO chez Tita Créations
Passionnée de chevaux, de nature, d'écriture... et d'informatique, j'ai découvert cette dernière avec un tout premier modèle d'ordinateur portable : un SHARP écran cristaux liquides d'au moins 10kg ! ... 1988
Aujourd'hui, je donne libre cours à ma créativité dans les domaines du web design, de la gestion de projet et de la gestion de contenu.


Commenter