0

I have the following 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 to include my own CSS style to this first and main <div class="photos-wrapper" id="detailPhoto"> but the only way to do this is by identify the grandchild selector i.e <a href="#/123456/"> because there are multiple occurrences of the same code. Maybe it will be a bit more clear when I show what I 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 the way I tried to do so but it obviously is not working. The thing I am probably trying to do here is called a parent selector but I'm not quite sure.

@edit Let's take a look on this code, it's actually more detailed: http://jsfiddle.net/60ezqtL7/

The goal is to hide by display: none; style whole divs that are containing exactly the same values i.e. <a href="#/000000/">PHOTO 1</a>

user3184101
  • 3
  • 3
  • CSS on works in one direction, you can select a child or decendant, not a parent or ancestor. There is a proposed parent selector as part of CSS4 but as CSS3 is still in draft, don't wait on it. it can be done with javascript, and simply with the jQuery library – Jon P Oct 09 '14 at 01:34
  • On a side note, why `DIV[class="photos-wrapper"]` instead of `div.photos-wrapper`? – Jon P Oct 09 '14 at 01:39
  • This was just what i tried but in html code like i said there are multiple occurrences of the same part of code. – user3184101 Oct 09 '14 at 20:56
  • Yep you are going to need some javascript here given your update. I'll see what I can come up with. Do you want to hide all divs with the same value or show the first one and hide the others? – Jon P Oct 09 '14 at 23:06
  • On a side note, if these are being generated by some server-side code, you would by much better off dealing with the duplciated there. – Jon P Oct 09 '14 at 23:08
  • It's not clear what you want when you say "whole divs that are containing exactly the same values". You'll need to provide a better example of the input and desired output. It's starting to sound like you need to handle this at the level where this HTML is being generated, which is...? –  Oct 10 '14 at 01:05
  • OK I'll try to explain in a different way. I want to add style, in this case `display: none;`, to ancestor i.e this DIV `
    ` to hide it, by matching its descendant that is `PHOTO 1`. As I showed above, in such order `a[href="#/000000/"] > div.pseudo > div.photos-wrapper[id="detailPhoto-068359036398824132_6546541189"] { display: none !important; }` Clearly it could be called "parent selector" which as of today isn't available in CSS and may never be. Is it better?
     – user3184101 Oct 10 '14 at 04:44

3 Answers3

1

There's no need to use jQuery in this case (or many other cases).

detailPhoto.classList.toggle('hide', detailPhoto.querySelector('[href=#/123456]'))
  • Thanks, I was unaware of the `toggle` method on `classList`. It's a good day when you learn something new. – Jon P Oct 09 '14 at 05:12
  • Though on second look, not quite as good as I thought, as unfortunatley IE 8 & 9 are still relevant: https://developer.mozilla.org/en-US/docs/Web/API/Element.classList – Jon P Oct 09 '14 at 05:21
  • Thank You for help but unfortunately none of all those solutions seems to work. I edited my first post and added a little bit more detailed code of what it looks like. – user3184101 Oct 09 '14 at 19:37
0

At this time there is not a way to do this with only CSS, but you can do it easily with JQuery. This will search the descendants of #detailPhoto and hide the href (set it to display: none;).

<script>
$(function() {
    $('#detailPhoto').find('a[href$="#/123456/"]').hide();
});
</script>

To search parents, you'd use this.

<script>
$(function() {
    $('a[href$="#/123456/"]').closest('#detailPhoto').hide();
});
</script>

To use this you will also need the JQuery library added to the head of your document. 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
EternalHour
  • 7,327
  • 6
  • 31
  • 54
  • Thank You for help but unfortunately i cannot make this work. Please go to see my first post I edited it and added a little bit more detailed code of what it looks like. – user3184101 Oct 09 '14 at 19:43
0

As I mentioned in my comment to your answer, there is not parent or ancestor selecor. The easiest and most efficient way to to it via jQuery is the has() method.

$('#detailPhoto').has('a[href*="123456"]').hide(); // or use .addClass() instead

Use Google to host jquery for you.

Demo : I've used the class selector in the demo as id should be unique.

addClass Demo

UPDATE

Given your update and assuming you want to display 1 and only 1 of each photo, additional wrappers with photos with the same href will be hidden.

/*Loop through each link in  div with cass psudo 
  in a div with class photos-wrapper*/
var found = {};
$(".photos-wrapper .pseudo a").each(function(){
    var $this = $(this);
    var href = $this.attr("href");
    //if the href has been enountered before, hide the .photos-wrapper ancestor    
    if(found[href]){
        $this.closest(".photos-wrapper").hide();
        /*Other options: 

        Use Css direct
        $this.closest(".photos-wrapper").css("display", "none");

        Assign a duplicate class, then style that class ass appropriate
        $this.closest(".photos-wrapper").addClass("duplicate");
       */
    }else{
    //otherwise add it to the array of what has been found
        found[href] = true;
    }
});

Demo

If you're not familiar with jquery, make sure to read up on how it is implemented and the purpose of $(document).ready();

Update 2

To hide all containers with replicated href use:

//Loop through each a tag 
$(".photos-wrapper .pseudo a").each(function () {

    var $this = $(this);
    //Get the href
    var href = $this.attr("href");

    //Check if more than one exists
    if ($('.photos-wrapper .pseudo a[href="' + href + '"]').size() > 1) {
        //Hide all .photo-wrapper containers that have  the replicated href
        $('.photos-wrapper .pseudo a[href="' + href + '"]').closest(".photos-wrapper").hide();
    }
});

Another Demo

I still suggest removing duplicates server-side if at all possible.

On a complete side note, the <center> tag was depreciated back at HTML4 and should no longer be used. Use CSS instead. There are pleanty of examples out there on how to center content using CSS.

Jon P
  • 17,053
  • 7
  • 44
  • 64
  • I have no experience with Maxthon, jquery is very cross-browser compatable so I would be surprised if that was the issue, does my latest demo fiddle work for you? – Jon P Oct 10 '14 at 00:58
  • Hello and Thanks again but any given solution seems to not work, what is going on ? Is this compatible with maxthon browser at all? I'm on maxthon Version: 4.3.1.1000 and I've never experienced this kind of problems. – user3184101 Oct 10 '14 at 01:00
  • There nothing happens in this demo. What it supposed to do? – user3184101 Oct 10 '14 at 01:02
  • I have just downloaded Maxthon and http://jsfiddle.net/60ezqtL7/1/ works as expexted there is only 1 instance "photo 1" not 2. Compare it to :http://jsfiddle.net/60ezqtL7/2/. Everthing happens on page load, so you don't see anything happen. – Jon P Oct 10 '14 at 01:06
  • Also see: http://jsfiddle.net/60ezqtL7/3/ to hide duplicates on button click. Same logic, just happens when you click something instead of page load. – Jon P Oct 10 '14 at 01:15
  • Got it! I found the cause I don't even know how come my AdFender was blocking the `code.jquery.com/jquery-git.js` address but luckily I find this in block log and now it's working. – user3184101 Oct 10 '14 at 01:27
  • So everything now is working but my goal was to hide all boxes that are containing the same content. I mean each PHOTO1 box. – user3184101 Oct 10 '14 at 01:38
  • It can be done, but it is an inefficient way of doing it, if you have control of how the HTML is generated (php, asp, angular js etc), you are betterr off handling this there, – Jon P Oct 10 '14 at 02:53
  • And here is the problem. I want to do so on the random website through the Stylish addon and that means I cannot control html, there you can only modify the CSS code. – user3184101 Oct 10 '14 at 04:37
  • Please see my latest update, though still a javascript/jquery solution – Jon P Oct 10 '14 at 04:41
  • Thank You a lot! I allowed myself to do a minor changes and now it's working perfectly! Here is the DEMO http://jsfiddle.net/60ezqtL7/7/ Now I just need to figure out how to make it work on the external website and that's all. – user3184101 Oct 10 '14 at 17:04