2

I am integrating a third party application into our application , there is one "Share" functionality that i want to hide. 

<table>
<tr>
    <td>
        <img src="a" title="broadcast" >
    </td>
    <td>
        <img src="b" title="Share" >
    </td>
    <td>
        <img src="c"  title="favourite" >
    </td>
</tr>
</table>

I can hide the td using css:nth-child selector but the problem is it hides other elements as well as it has similar HTML skeleton across the application. so i targeted the image using its data-attribute but after that not sure how i can get its immediate parent td where i could apply display : none.

I can not modify the third part applications html tags, so there is no scope to add class or id to td and img elements. Only they have provided a customerCss file with which we could hide or change color for branding and all.

Thanks in advance..

here is what i tried to target the img tag 

img[title = 'Share']:parent {
display : none;
}
Mayur Randive
  • 591
  • 1
  • 8
  • 20
  • You cannot select parent element in css. – Mohammad Usman Nov 18 '16 at 07:58
  • If you can enclose above code into a div with unique id ie.. **
    **, then you can target this table and its td as child of the new div as CSS properties can be applied on children elements not on parent elements.
     – vinayofficial Nov 18 '16 at 12:54

2 Answers2

1

You can't do this with CSS.

But you could simply do it with jQuery

jQuery

$("img[title='Share']").parent().css("display", "none");

or

$("td:has(img[title='Share'])").css("display", "none");
SvenL
  • 1,706
  • 5
  • 10
  • OP wants to hide parent (not child). – Mohammad Usman Nov 18 '16 at 07:59
  • This will select all img[title='Share'] with parent td. Not td with child img. – uji Nov 18 '16 at 08:02
  • Yeah sry you're all totally right. Thank you for pointing that out. – SvenL Nov 18 '16 at 08:23
  • Why jQuery? OP hasn't tagged this question with JavaScript, let alone jQuery. OP has also mentioned that they can only modify a CSS file, so unless you propose some way of including jQuery and executing the code you've provided within a CSS file then this answer is meaningless. – James Donnelly Nov 18 '16 at 09:40
  • @JamesDonnelly Because this is the only way for selecting the parent of an element. There might be a :has selector in the future but at the moment you simply can't do this with CSS. – SvenL Nov 18 '16 at 11:39
  • jQuery is a JavaScript library in a sea of other JavaScript libraries which all have the functionality to select parent elements. In native JavaScript, you simply need to grab the `parentNode` of the element - no need for jQuery at all. But in OP's case, OP can *only* modify the CSS (as their question states), so this answer will not solve anything. On a side note, the Selectors Level 4 documentation defines an `E! > F` selector, which selects the *E* parent of *F*. In OP's case, `span! > img[title="share"]`. – James Donnelly Nov 18 '16 at 11:43
  • With _the only way for selecting the parent of an element_ I didn't mean just jQuery. Of course you could also achieve this with plain JavaScript since jQuery is written in JavaScript but maybe I should have been more precise about this. Also on a side note, the Level 4 documentation also defines a `a:has(>img)` [selector](https://drafts.csswg.org/selectors/#has-pseudo), which selects all `a` elements which contains an `img` child. In Ops case `td:has(>img[title="Share"])`. But since it's only a draft I think it's not very useful for OP. – SvenL Nov 18 '16 at 12:22
  • And maybe this script is also useful for someone who has not _only_ access to a CSS file. – SvenL Nov 18 '16 at 12:24
1

Currently, there is no way of targeting the parent of an element through css. You can however do it via javascript. Here's an example using jQuery:

$('img[title="Share"]').parent('td').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td>
        <img src="a" title="broadcast" >
    </td>
    <td>
        <img src="b" title="Share" >
    </td>
    <td>
        <img src="c"  title="favourite" >
    </td>
</tr>
</table>
uji
  • 1,493
  • 3
  • 11
  • 12
  • Why jQuery? OP hasn't tagged this question with JavaScript, let alone jQuery. OP has also mentioned that they can only modify a CSS file, so unless you propose some way of including jQuery and executing the code you've provided within a CSS file then this answer is meaningless. – James Donnelly Nov 18 '16 at 09:39
  • @JamesDonnelly I was just providing an option. OP can use vanilla js or any js library for that matter. CSS is not an option here as it cannot target a parent element via the child. Also there are ways for this to work even without including the js in the third party application. – uji Nov 21 '16 at 04:15
  • As I commented on the other answer here, the problem is that OP specifically states that they can **only** modify a CSS file, This answer doesn't help them at all. – James Donnelly Nov 21 '16 at 09:17