html - Apply style to grandparent of the grandchild with specific value -

html - Apply style to grandparent of the grandchild with specific value -

this question has reply here:

is there css parent selector? 20 answers

i have next code:

<div class="photos-wrapper" id="detailphoto"> <div class="pseudo"> <a href="#/123456/">fixedtext</a> </div> <div class="image-wrapper"> <a href="#"></a> </div> <div class="activites"> <a href="#"></a> </div> <div class="commentaire"> <a href="#"></a> </div> </div>

i want include own css style first , main <div class="photos-wrapper" id="detailphoto"> way identify grandchild selector i.e <a href="#/123456/"> because there multiple occurrences of same code. maybe bit more clear when show tried:

a[href*="123456"] > div.pseudo > div.photos-wrapper[id^="detailphoto"] { display: none !important; } div.photos-wrapper[id^="detailphoto"] < div.pseudo < a[href*="123456"] { display: none !important; }

that's way tried not working. thing trying here called parent selector i'm not quite sure.

@edit let's take on code, it's more detailed: http://jsfiddle.net/60ezqtl7/

the goal hide display: none; style whole divs containing same values i.e. <a href="#/000000/">photo 1</a>

as mentioned in comment answer, there not parent or ancestor selecor. easiest , efficient way to via jquery has() method.

$('#detailphoto').has('a[href*="123456"]').hide(); // or utilize .addclass() instead

use google host jquery you.

demo : i've used class selector in demo id should unique.

addclass demo

update

given update , assuming want display 1 , 1 of each photo, additional wrappers photos same href hidden.

/*loop through each link in div cass psudo in div class photos-wrapper*/ var found = {}; $(".photos-wrapper .pseudo a").each(function(){ var $this = $(this); var href = $this.attr("href"); //if href has been enountered before, hide .photos-wrapper ancestor if(found[href]){ $this.closest(".photos-wrapper").hide(); /*other options: utilize css direct $this.closest(".photos-wrapper").css("display", "none"); assign duplicate class, style class ass appropriate $this.closest(".photos-wrapper").addclass("duplicate"); */ }else{ //otherwise add together array of has been found found[href] = true; } });

demo

if you're not familiar jquery, create sure read on how implemented , purpose of $(document).ready();

update 2

to hide containers replicated href use:

//loop through each tag $(".photos-wrapper .pseudo a").each(function () { var $this = $(this); //get href var href = $this.attr("href"); //check if more 1 exists if ($('.photos-wrapper .pseudo a[href="' + href + '"]').size() > 1) { //hide .photo-wrapper containers have replicated href $('.photos-wrapper .pseudo a[href="' + href + '"]').closest(".photos-wrapper").hide(); } });

another demo

i still suggest removing duplicates server-side if @ possible.

on finish side note, <center> tag depreciated @ html4 , should no longer used. utilize css instead. there pleanty of examples out there on how center content using css.

html css css3 css-selectors parent-child