0

I'm trying to remove a bit of css from a certain page as I'm using an Google Org Chart in my drupal site and some of my css is overriding what is already there. Here is the code below.

What I want to remove:

.MainBlock table td {
   border-right: 1px solid #045273;
   border-bottom: 1px solid #045273;
   vertical-align: top;
}

I've tried a number of things, but nothing has worked. All attempts that I haven't removed are below.

<script type="text/javascript">
  if (document.URL.indexOf("/node/7794/draft") >= 0) {
  //$('.MainBlock').find("table tr").css("border-bottom","");
  //$(".MainBlock table td").css("border-bottom":"12px Solid #000");
  $(".MainBlock table td").css({ 'border-bottom' : ''});
}

I need it to ignore that line of css, as it's needed on other pages. That, and setting it to 0 or none sort of breaks it.

salwine
  • 40
  • 1
  • 8

3 Answers3

3

You can use 0 or none to remove the border, an empty string does not work.

$( '.MainBlock table td' ).css( { 'border-bottom' : 0 } );
.MainBlock table td {
   border-right: 1px solid #045273;
   border-bottom: 1px solid #045273;
   vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="MainBlock">
  <table>
    <tr>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </table>
</div>

Ultimately I'd stick to CSS if you can. Ensure that you place the same selector after the original and it will override it. 

/* original rule */
.MainBlock table td {
   border-right: 1px solid #045273;
   border-bottom: 1px solid #045273;
   vertical-align: top;
}

/* sometime later, maybe in a different file */
.MainBlock table td {
  border-bottom: 0;
}

An alternative is to increase the selectors specificity. Since it's a Drupal site there should be a page ID to hook onto to, something like:

.page-node-2793683 .MainBlock table td {
  border-bottom: 0;
}

EDIT

Per clarification and @EF it:

To prevent the styles being applied to a particular page you can use :not() pseudo selector.

div:not(.page-node-2793683) .MainBlock table td {
   border-right: 1px solid #045273;
   border-bottom: 1px solid #045273;
   vertical-align: top;
}
<div class="page-node-2793683">

  <div class="MainBlock">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>
  </div>
  
</div>

<div class="page-node-10">

  <div class="MainBlock">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>
  </div>
  
</div>

Note: While not required, using not() without a selector proceeding it may not work reliably. The example above may need to be modified to suite your needs.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • The CSS worked (That's an amazing bit of new information I'll be sharing with my team), however I'm trying to essentially make that css non-existent. If I set the border bottom (what I'm really trying to target), to 0 or none, then it removes the border all together. I need it to not target anything on this page. – salwine May 23 '17 at 13:55
  • Would your .page-node-### trick have an opposite where it targets all pages but one? – salwine May 23 '17 at 14:02
  • 1
    all pages but one could be targetted using a not selector.. so `:not(.page-node-2793683) .MainBlock table td { ...` – JF it May 23 '17 at 14:07
  • 1
    @JFit That did it! Thank you very much! – salwine May 23 '17 at 14:26
  • @JFit It would appear this didn't actually work and I got a head of myself so we're back to square one. – salwine May 26 '17 at 15:21
  • put a **not** in a different place then - so give your table a class. then in your selector, exclude this class.. it may be something got to do with the page node changing or something - i havent used that... so.. ` ...` and then your selector: `.MainBlock table:not(.excludeMainClass) td { ...`
     – JF it May 26 '17 at 15:32
  • 1
    @salwine did you see the note at the bottom of my answer and example at the end of my answer based on **@JF it**'s comments? You will likely to need add a selector proceeding `:not()`. For you it may be `body:not()`, a class `.abs:not()`. It would be easier to diagnose with a better (more complete) markup example. – hungerstar May 26 '17 at 16:10
  • 1
    @JFit I knew I was just ordering the declaration wrong. But this worked! Thank you so much for getting back to me. – salwine May 26 '17 at 17:05
0

The beauty of css and the "cascade" (the 'c' in css) is that you don't need javascript to change the way something looks. All you need is a style sheet overrides the "rule" in the other style sheet. Your new rule just has to be more specific and it only needs the properties you are trying to override. In this case

border-bottom: 0;

Have a look at Specificity to learn how to make your rule specific enough to override the old rule.

gforce301
  • 2,944
  • 1
  • 19
  • 24
  • True, but I'm trying to have this page and this page only completely ignore it, not override it. For some reason, setting it to 0 or none breaks the table entirely. I need it to just not exist on this page. – salwine May 23 '17 at 14:03
0

From the jquery docs http://api.jquery.com/css/#css-propertyName-value:

$( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied

This can't work because border-bottom wasn't assigned directly (i.e. with the style attribute), but through a css rule.

12px Solid doesn't work because it is not valid (the color is missing).

Anyway, I'd suggest to tackle this problem by css directy, not by js

.node-7794 .MainBlock table td {
  border-bottom: 0 none;
}

If the rule doesn't work, use the developer console of your browser to find out why

mos
  • 83
  • 7