0

I'm using a SaaS website that generates the following HTML. 

<div class="sidebar-body">
    <div class="sidebar-block">
      <form class="form-inline subscribe-form">
        ...
      </form>
    </div>

    <div class="sidebar-block">
      .... something else
    </div>

    <div class="sidebar-block">
      .... another block
    </div>
</div>

Specifically it shows a particular form (subscribe-form), that I don't want shown. Instead, I want my own form to be shown.

The website allows for custom CSS.

Questions:

  1. Is there any way I can disable only the div that contains the subscribe-form but not other divs that have the same class?

  2. Would I be able to replace the contents of the div that contains the undesired form?

for now, I have done this:

.subscribe-form {
   display: none;
}

But it still shows the parent div, which I don't want shown.

H.M.
  • 69
  • 6

2 Answers2

2

You may use jquery parent selectors

$('.subscribe-form').parent().css('display','none');

sample

qtgye
  • 3,580
  • 2
  • 15
  • 30
  • I can only use CSS. I don't believe I can provide this as part of a CSS file. – H.M. Jul 02 '14 at 09:17
  • currently there is no way in CSS where you can select an element's parent. Unless you specify a class or an ID for that parent and target it. Otherwise, you can only use javascript/jquery. http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – qtgye Jul 02 '14 at 09:37
  • Is there a way to select the first "sidebar-block" class or is that also not possible? – H.M. Jul 02 '14 at 11:14
  • Its possible: .sidebar-block:first-child – qtgye Jul 03 '14 at 01:00
0

So to answer my own question, this can be done using the nth-child selector.

.sidebar-body .sidebar-block:nth-child(1) {
display: none;
}
H.M.
  • 69
  • 6