28234 sujets

CSS et mise en forme, CSS3

[Résolu] Ciblage css

Bonjour,
je bloque sur un ciblage précis sur un site prestashop pour lequel je ne peux pas redéfinir la classe d'un élément.
Voici le début du code sur une base bootstrap:
<div id="avis" class="col-lg-5 col-md-2 col-sm-12 col-xs-12 col-sp-12 ApColumn ">
                 
<div id="image-form_42301659691828755" class="block avis ApImage">
<img src="/xxx/tesli1.png" class="img-responsive " title="" alt="" style=" width:auto; height:auto">
 </div>

<div class="block block_carousel exclusive appagebuilder">
<div class="block_content">

	<h4 class="title_block">Nos clients vous donnent leur avis</h4>


là dedans je veux cibler le h4, mais bien entendu dans ma page d'autres h4 sont encapsulés de la même manière; seule l'identifiant "avis" et la classe "avis" sont unique dans la page.
j'ai essayé avec les selecteurs adjacent mais sans succès.
si vous avez une idée ? je prends volontier.
merci
Salut et bienvenue sur le forum,

Bien que je ne comprenne pas exactement la question, si tu veux cibler exactement ce h4 tu peux faire un truc assez compliqué comme ça :
#avis > .avis + .block > .block_content:first-child > h4{
  color: red;
}

Là on est vraiment très très spécifique...
Modifié par MatthieuR (31 Mar 2016 - 21:57)
Bingo!
c'est exactement ça ; merci
alors je vais abuser ; dans le même principe :

<div class="col-md-2 col-lg-3 ApColumn ">
         
<div class="block latest-blogs exclusive appagebuilder" id="blog-form_27191148741766565">
	<h4 class="title_block">
		LE BLOG
	</h4>	
</div>
<div id="image" class=imgresp">
xxxxxxx
</div>
<div class="aphtmlblock">
xxxx
</div>
</div>

donc sur le même principe je veux cibler la div aphtmlblock dans ce cas précis pour lui donner un border; cette classe aphtmlblock est répétée xfois dans ma page, mais je ne désire encadré que cette div ;
la classe unique est col-lg3
merci pour le coup de pouce
Même principe :
.col-lg-3 > .block:first-child + .imgresp + .aphtmlblock{
  color: red;
}

Mais franchement c'est pas terrible de cibler des éléments si précisément...
oui je me doute , mais je suis vraiment bloqué sur ce cas précis.
mais un grand merci pour cette aide, ça me sort une épine du pied !
Administrateur
Bonjour et bienvenue jeform, Smiley smile

MatthieuR a écrit :
Mais franchement c'est pas terrible de cibler des éléments si précisément...

YEP Smiley fache

Smiley lol

1er exemple : si cet #avis ne contient qu'un h4 alors "#avis h4" suffit. S'il n'y a de toute façon que dans #avis que peut se trouver un .avis (edit: c'est le cas d'après le 1er post) alors ".avis h4" est moins spécifique.
Modifié par Felipe (02 Apr 2016 - 12:23)
Administrateur
JENCAL a écrit :
et
.col-lg-3 > .aphtmlblock {
  color: red;
}


c'est pas bon ?

Oui, Smiley jap puisque jeform dit que .col-lg-3 est unique, mais pas certain parce que .aphtmlblock pourrait être répété dans ce bloc (en vrai, si l'exemple est tronqué). Dans ce dernier cas, un compromis serait de rajouter l'id qui précède (les id c'est unique dans chaque page) : ".col-lg-3 #image + .aphtmlblock"

MAIS
je ne parierais pas qu'une classe de la grille Bootstrap reste unique dans une page ! C'est fait pour être utilisé sur n'importe quel bloc, plugin, etc
.latest-blogs ça me paraît pas devoir être utilisé 10 fois, nan ? ".latest-blogs + .imageresp + .aphtmlblock" peut-être ?
Modifié par Felipe (02 Apr 2016 - 12:20)
Merci pour vos contributions;
pour répodre a vos interrogation, seules les propositions de matthieu ont parfaitement fonctionnés !

un autre petit défi du même style :
voici le code , je précise que j'ai 2 blogs sur ma page qui s'appuient sur la même architecture :

<div id="blogcontent" class="col-lg-4 col-md-2 col-sm-12 col-xs-12 col-sp-12 ApColumn ">
               
<div class="block latest-blogs exclusive appagebuilder" id="[#red]blog-form_39904324784742285[/#]">
		<div class="block_content">	
<div class="carousel slide" id="carousel-2933092822">
        <div class="carousel-inner">
                            <div class="item active">
                <ul class="product_list grid">
                          <li class="ajax_block_product product_block col-xs-12 col-sm-12 col-md-12 first_item">
                        <!-- @file modules\BlogItem -->
<div class="blog-container" itemscope="" itemtype="https://schema.org/Blog">
    <div class="left-block">
        <div class="blog-image-container">
            <a class="blog_img_link" href="/blog/b33.html" title="xxxx" itemprop="url">
							<img class="replace-2x img-responsive" src=/img/leoblog/b/33/350_200xxx" alt="xxxx" title="xxx" width="350" height="200" itemprop="image">
			            </a>
        </div>
        		        <h5 class="blog-title" itemprop="name"><a href="xxxxl" title="xxx">xxx</a></h5>
            </div>


ici je tente un margin-top sur blog-image-container mais qui doit dépendre de l'id blogcontent
j'ai bien peur que ce soit encore un ciblage bien tordu !
Sujet clos
Aller à