/* * -> [SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design * * différents overrides de styles CSS pour l'ensemble des pages/fonctionnalités du site. * TODO - séparer chaque overrides de styles CSS dans des fichiers mieux-nommés, exemple, pour le menu: si_css-ro-_menuStylesheet.css * ------------------------------------------------------------------------------------------------------------------------------------ * REFERENCES UTILES POUR DEVELOPPEURS: * * #{pureCSS}::Syntaxe * >>référence * IMPORTANT: ATTENTION - A RETENIR - NOTE - * ------------------------------------------------------------------------------------------------------------------------------------- * je sais que les développeurs doivent s'entraider, donc, comme je suis sympathique, je vais ici lister certains des sélecteurs CSS * dont je me servirai dans ce fichier.. * (ce qui est valable pour un nom de balise, est aussi valable pour n'importe quel autre nom de balise HTML) * voilà ceux que j'utilise pour l'instant: * (¤) * SELECTEUR : * * DESCRIPTION : permet de cibler n'importe quel élément, classe CSS attribut de là où il est situé etc... * (exemple: span * signifiera de cibler n'importe quoi dans un !) * n'oubliez pas, comme ce sélecteur est un passe-partout, il est généralement très gourmand en ressources * si pour un PC récent cela ne posera pas de problèmes, on ne pourra pas en dire pareil d'un vieux PC * (¤) * SELECTEUR : # * DESCRIPTION : permet de cibler un élément HTML par son ID. * n'oubliez pas, il ne peut y avoir qu'un seul ID par élément HTML * (et généralement il ne faut JAMAIS avoir deux fois le même). * (¤) * SELECTEUR : . * DESCRIPTION : permet de cibler un élément HTML par sa classe CSS. * (¤) * SELECTEUR : .classeCSS1.classeCSS2 * DESCRIPTION : permet de cibler un élément HTML par une classe précise nommée (ici; classeCSS1), * et ne continuer à le cibler que si le même élément HTML a aussi une autre classe précise (ici: classeCSS2) * (¤) * SELECTEUR : span[attributHTML] * DESCRIPTION : permet de cibler un élément HTML par son nom de balise que si il a un attribut HTML nommé: attributHTML * (¤) * SELECTEUR : span[attributHTML=yep] * (VERSION 2) : span[attributHTML~=yep] * DESCRIPTION : permet de cibler un élément HTML par son nom de balise que si il a un attribut HTML nommé: attributHTML * ayant pour valeur exacte: yep * exemple habituel d'usage: input[type=text], ne cible que les ayant un attribut 'type' valorisé à 'text' * notez que si vous avez un espace ou un caractère non alphanumérique dans la valeur.. il faut alors entourer de " * supposons de chercher: yep là! * dans : un atttribut html nommé: attributHTML * |CORRECT| - span[attributHTML="yep là!"] * |CORRECT| - span[attributHTML~="yep là!"] * |INCORRECT| - span[attributHTML=yep là!] * |INCORRECT| - span[attributHTML~=yep là!] * car sinon le sélecteur chercherait une valeur CSS tronquée (et fatalement, il ne la trouverai jamais). * (¤) * SELECTEUR : span[attributHTML^=yep] * DESCRIPTION : permet de cibler un élément HTML par son nom de balise que si il a un attribut HTML nommé: attributHTML * ayant au-moins pour valeur de début d'attribut: yep * on cherche donc à partir du début * notez que si vous avez un espace ou un caractère non alphanumérique dans la valeur.. il faut alors entourer de " * (comme expliqué dans la version span[attributHTML=yep]) * exemple d'usage: * supposons de chercher la valeur: yep * dans : un atttribut html nommé: attributHTML * mais : au début de l'attribut * (attention, le terme recherché ne doit pas forcément être un mot entier) * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML^=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML^=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML^=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML^=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML^=yep] * |EXEMPLE RESULTAT| - non-trouvé, car le terme recherché est à la fin pas au début dans le , peu importe les espaces ou caractères avant * (¤) * SELECTEUR : span[attributHTML$=yep] * DESCRIPTION : permet de cibler un élément HTML par son nom de balise que si il a un attribut HTML nommé: attributHTML * ayant au-moins pour valeur de fin d'attribut: yep * on cherche donc à partir de la fin * notez que si vous avez un espace ou un caractère non alphanumérique dans la valeur.. il faut alors entourer de " * (comme expliqué dans la version span[attributHTML=yep]) * exemple d'usage: * supposons de chercher la valeur: yep * dans : un atttribut html nommé: attributHTML * mais : à la fin de l'attribut * (attention, le terme recherché ne doit pas forcément être un mot entier) * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML$=yep] * |EXEMPLE RESULTAT| - non-trouvé, car le terme recherché est au début pas à la fin dans le , peu importe les espaces ou caractères après * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML$=yep] * |EXEMPLE RESULTAT| - non-trouvé, car le terme recherché est au début pas à la fin dans le , peu importe les espaces ou caractères après * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML$=yep] * |EXEMPLE RESULTAT| - non-trouvé, car le terme recherché est au début pas à la fin dans le , peu importe les espaces ou caractères après * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML$=yep] * |EXEMPLE RESULTAT| - non-trouvé, car le terme recherché est au début pas à la fin dans le , peu importe les espaces ou caractères après * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML$=yep] * |EXEMPLE RESULTAT| - trouvé * (¤) * SELECTEUR : span[attributHTML*=yep] * DESCRIPTION : permet de cibler un élément HTML par son nom de balise que si il a un attribut HTML nommé: attributHTML * ayant au-moins pour valeur d'attribut n'importe où: yep * on cherche donc à partir de n'importe où * notez que si vous avez un espace ou un caractère non alphanumérique dans la valeur.. il faut alors entourer de " * (comme expliqué dans la version span[attributHTML=yep]) * exemple d'usage: * supposons de chercher la valeur: yep * dans : un atttribut html nommé: attributHTML * mais : n'importe où dans l'attribut * (attention, le terme recherché ne doit pas forcément être un mot entier) * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML*=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML*=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML*=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML*=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML*=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML*=yep] * |EXEMPLE RESULTAT| - trouvé * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML*=yep] * |EXEMPLE RESULTAT| - non-trouvé nulle-part, du moins pas dans l'ordre correct des lettres * (¤) * SELECTEUR : span[attributHTML|=yep] * DESCRIPTION : permet de cibler un élément HTML par son nom de balise que si il a un attribut HTML nommé: attributHTML * ayant au-moins pour valeur de début d'attribut: yep * on cherche donc à partir du début * notez que si vous avez un espace ou un caractère non alphanumérique dans la valeur.. il faut alors entourer de " * (comme expliqué dans la version span[attributHTML=yep]) * exemple d'usage: * supposons de chercher la valeur: yep * dans : un atttribut html nommé: attributHTML * mais : au début de l'attribut * (attention, le terme recherché doit être un mot entier mais les - (tirêts/hyphens) fonctionnent) * (cela ne fonctionne pas tout-à-fait comme l'exemple span[attributHTML^=yep], voyez plus plutôt plus bas) * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML|=yep] * |EXEMPLE RESULTAT| - non-trouvé car le terme est séparé par des espaces * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML|=yep] * |EXEMPLE RESULTAT| - non-trouvé, car le terme est attaché entièrement * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML|=yep] * |EXEMPLE RESULTAT| - trouvé, en effet, * le - considère que même quand le terme est attaché, du moment qu'avant l'attachement se trouve le terme recherché, ça matche * ou * |EXEMPLE HTML| - test * |EXEMPLE CSS| - span[attributHTML|=yep] * |EXEMPLE RESULTAT| - trouvé, en effet, * le - considère que même quand le terme est attaché, du moment qu'avant l'attachement se trouve le terme recherché, ça matche * (¤) * SELECTEUR : button > span * DESCRIPTION : permet de cibler un élément HTML au sein d'un élément HTML