Div et class imbriquées, je vis l'enfer...

bonjour à tous,

je joins à ce message une image ou j'édite via mon navigateur la structure d'un page html et notament d'un élément "img src" imbriqué dans des divs et classes.

je deviens fou car je n'arrive pas à le cibler.

je maitrise pas trop mal les css sauf évidemment le sujet qui me préoccupe et qui est le ciblage d'un élément précis.

je connais mal les priorités et les syntaxes dans ce cas de figures.

en fait et pour être plus précis, dans le cadre d'imbriquations (div, class ou les deux) ou dans le cadre d'un élément devant recevoir les propriétés de deux classes par exemple, je ne sais pas du tout comment les cibler.

je ne sais pas, par exemple, quelle est la différence entre deux classes qui se suivent avec un espace et deux classes qui se suivent sans espace (ex: ".class1.class2" et ".class1 .class2")... je suis perdu. je ne comprends pas la différence entre "#maClasse" et "div#maClasse"...

bref je suis paumé et je serais très heureux si l'un d'entre vous pouvais m'expliquer comment cibler la balise "img src" imbriquée dans les divs et classes sur l'image jointe.

j'ai essayé évidemment plusieurs type de ciblage:


#rps div .col .img {filter:alpha(opacity=20); opacity:0.2;}
ou
#rps div.window div.slider div.col.img {filter:alpha(opacity=20); opacity:0.2;}
ou
#rps .img {filter:alpha(opacity=20); opacity:0.2;}


bref, j'ai essayé 150 choses différentes avec ou sans espaces... je n'y arrive pas!

le but étant évidement de comprendre, je serais plus que preneur d'une explication!

merci à tous et bonne journée.

happy loy krathong à tous!


Modifié par flyeric (10 Nov 2011 - 11:08)

Salut,

flyeric a écrit :
je maitrise pas trop mal les css sauf évidemment le sujet qui me préoccupe et qui est le ciblage d'un élément précis.

je connais mal les priorités et les syntaxes dans ce cas de figures.

Alors il faut que tu apprenne les sélecteurs CSS (lire les specs pour commencer )

flyeric a écrit :

bref je suis paumé et je serais très heureux si l'un d'entre vous pouvais m'expliquer comment cibler la balise "img src" imbriquée dans les divs et classes sur l'image jointe.

Tu peux par exemple la cibler avec le sélecteur suivant :

div.col a img { … }

Ici, je sélectionne les images se trouvant dans un lien hypertexte se trouvant lui-même dans une division portant la classe "col".
Il va falloir adapter cet exemple à ce que tu veux faire, car il y a des chances pour que ce sélecteur cible cette image mais aussi d'autres reproduisant le même contexte… Mais le mieux, se serait certainement d'aller faire un tour sur le lien cité plus haut. Une recherche d'infos sur les "sélecteurs CSS" te donnera pas mal de lecture
Modifié par audrasjb (10 Nov 2011 - 11:25)

flyeric a écrit :

#rps div .col .img {filter:alpha(opacity=20); opacity:0.2;}

Cible un élément portant la classe "img" dans un élément portant la classe "col" dans une division dans un élément portant l'identifiant "rps".
Pas adapté à ton document HTML.

flyeric a écrit :

#rps div.window div.slider div.col.img {filter:alpha(opacity=20); opacity:0.2;}

Le sélecteur div.col.img est erroné…

flyeric a écrit :

#rps .img {filter:alpha(opacity=20); opacity:0.2;}

Cible un élément portant la classe "img" dans un élément portant l'identifiant "rps".
Pas adapté à ton document HTML.

L'exemple de sélecteur que j'ai donné plus haut devrait fonctionner mais il y a de nombreuses façon de cibler ton image, suivant ce que tu veux faire (appliquer ce sélecteur à d'autres contextes utilisant le même template, ou pas, etc.). Le mieux resterait donc d'aller te documenter sur les sélecteurs (*) car comme tu l'as vu, en essayant un peu n'importe lequel au petit bonheur de la chance, tu ne risques pas de te permettre de beaucoup avancer sur ton souci…
Bonnes lectures

(*) Et vu les exemples de sélecteurs que tu as utilisé, tu devrais commencer par bien apprendre la différence entre les sélecteurs de balises, d'identifiants et de classes, puis apprendre a utiliser correctement les sélecteurs de descendance.
Modifié par audrasjb (10 Nov 2011 - 11:38)

d'abord, merci beaucoup à toi Audrasjb,

ensuite je dois te dire que j'ai appliqué ton conseil et que ça marche.

j'ai maintenant deux questions:

1) que j'écrive "#rps div.col a img" ou "div.col a img" ça ne change rien, les deux marchent.
donc je me demande jusqu'à quel moment je dois ou non remonter dans l'arborescence et mentionner ou non le parent?
je veux dire pourquoi mettre "div.col a img" et non "div.slider div.col a img" ? là, je ne comprends pas.

2) et très important, je ne comprends pas du tout mais alors pas du tout ce que viens faire le "a" dans "div.col a img". je ne cible pas un lien mais une image.
donc que vient faire la "a" la dedans?

je précise que consécutvement à cette réponse, je vais bien entendu tout de suite aller voir le lien que tu m'as donné plus haut.

merci mille fois à toi et bonne journée à tous.
Modifié par flyeric (10 Nov 2011 - 11:41)

flyeric a écrit :
1) que j'écrive "#rps div.col a img" ou "div.col a img" ça ne change rien, les deux marchent.
donc je me demande jusqu'à quel moment je dois ou non remonter dans l'arborescence et mentionner ou non le parent?

Tu utilises la classe "col" (nom court et très générique) ailleurs dans tes pages, en particulier en dehors d'un bloc portant l'identifiant "rps"? Et si oui, est-ce que tu veux que tes styles s'appliquent dans ce cas, ou au contraire ça risque de te créer des problèmes?

La stratégie qui va bien pour écrire un sélecteur CSS, c'est:
1. Être suffisamment spécifique. On ne veut pas voir des styles prévus pour une série d'éléments s'appliquer à d'autres éléments à cause d'un sélecteur pas assez précis. En l'occurrence une classe comme "col" c'est très générique comme nom, donc le sélecteur ".col img" est sans doute pas assez spécifique. Dans certains cas, on gagnera à utiliser le sélecteur d'enfant (symbole ">") au lieu du sélecteur de descendant (symbole espace).
2. Être aussi concis que possible. Pas la peine de lister tous les éléments dans le DOM. Et il est souvent inutile de mentionner les noms des éléments qui portent un identifiant ou une classe précis. Donc on utilisera "#rps .col > a > img" plutôt que "div#rps > div.window > div.slider > div > div.col > a > img".

flyeric a écrit :
je ne comprends pas du tout mais alors pas du tout ce que viens faire le "a" dans "div.col a img". je ne cible pas un lien mais une image.
donc que vient faire la "a" la dedans?

Bon, raisonnons ainsi:
- Tu ne cibles pas un lien? OK, on le retire: "div.col img".
- Mais en fait tu ne cibles pas non plus un DIV qui porte la classe "col", n'est-ce pas, car tu cibles une image. Donc on retire ça aussi: "img".
- Ton sélecteur final est donc "img" et tes styles vont s'appliquer... à toutes les images de tes pages. Ah merde...

Dans un sélecteur CSS, la partie la plus à droite décrit l'élément que tu vises. Tout ce qui la précède décrit le contexte dans lequel apparait l'élément. Si tu enlèves le contexte, ton sélecteur devient plus générique et s'applique à plus d'éléments.

Pour bien comprendre il n'y a pas de secret: il faut lire des articles ou chapitres de bouquins sur les sélecteurs CSS, apprendre le signification de chaque symbole, et apprendre à déchiffrer un sélecteur CSS par soi-même.

flyeric a écrit :
je précise que consécutivement à cette réponse, je vais bien entendu tout de suite aller voir le lien que tu m'as donné plus haut.

C'est un peu faire les choses à l'envers...