CODEWITHSUNDEEP
css
Lucas del Rio
Lucas del Rio

Reputation: 13

Can't hide a li element

I've read all the posts on this but none of the things work and I'm stuck.

I'm trying to hide a couple of li elements. Here's the URL: http://foundernest.com/submit-project/

I'm trying to hide the block that says "Venture URL"

I've tried:

form.post li:nth-child(2){ display:none !important; }

But it didn't work.

Do you have any other idea of what I could do?

Thanks a lot.

Upvotes: 1

Views: 645

Answers (4)

user3137875
user3137875

Reputation:

That code you have there should work as long as you've considered that nth-child selector is 0 indexed

Otherwise you're not using the right selector for that li, just right click the element you need on google chrome, select "Inspect element" and when dev tool prompts with that li selected, right click on that selected element and simply select copy > copy selector

Hope that helps

Now that I've seen your html I'd recommend you to either use this selector "#step-post > div > form > li:nth-child(7)" or use an inline style tag as the selector may cause trouble with if that element exist in another HTML file. However, I'd get rid of that on the HTML not on the CSS, putting the entire element in or simply deleting it if I'm sure it will not be used in the future

Upvotes: 1

Lucas del Rio
Lucas del Rio

Reputation: 13

<form class="post" role="form" class="validateNumVal">

<li class="form-group custom-field">
    <div class="row">
        <div class="col-md-4">
            <label for="venturelink" class="control-label title-plan">
                Venture URL<br/>
                <span><p>This will give more context to the expert</p>
</span>
            </label>
        </div>
        <div class="col-sm-8 text-field">

        <input class="field-control input-item form-control text-field"  placeholder="e.g. http://foundernest.com" name="venturelink" value="" type="text"  >        </div>
    </div>
</li>

Upvotes: 0

csaetre
csaetre

Reputation: 129

Try :nth-of-type

#step-post li.form-group:nth-of-type(2){
    display:none;
}

Your form element has a mix of child elements (both div and li ), and the above example selects the 2nd li.

You will you need to count all the siblings of the form, not just the li items, if you want to use the :nth-child selector:

#step-post li:form-group:nth-child(7){
    display:none;
}

Upvotes: 0

Lucas del Rio
Lucas del Rio

Reputation: 13

Apologies. You need to be logged in to see it.

You can use:

  • Username: test
  • Password: test12

Thanks everyone

Upvotes: 0

Related Questions