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.
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
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;
}
Apologies. You need to be logged in to see it.
You can use:
Username: test
Password: test12
Thanks everyone
<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>
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
Is there a CSS or pure HTML solution to having a div only be visible when it has content? I have this JSP code:
<div class="message-panel panel-alert">
<span class="label-warning">
<span class="warning-sign"></span>
</span>
<c:if test="${condition1}">
<p> Condition 1 is true </p>
</c:if>
<c:if test="${condition2}">
<p> Condition 2i s true </p>
</c:if>
</div>
If either of the conditions are true, I do want to show the alert panel with my warning sign, but I don't want this div to appear at all if neither of them are true. Two solutions I can think of is to surround this whole thing with an all-inclusive if statement, or to modify the visible attribute of the div programatically in javascript. however, I am wondering if there is a way to say "Hey, div, go away if there's nothing in you".
Use the :empty pseudo-selector:
div.panel-alert:empty {
display: none;
}
You can try creating a class called hidden. And add it to the <div class="message-panel panel-alert"> when both texts are empty (using both ifs) and then in css define .hidden {display:none;} or as you stated use some javascript as described here Using an if statement to check if a div is empty
i have :
<form id="commentform">
<p class="class1">
<p class="class2">
<p>
<input id="captcha_code"></input>
</p>
</form>
i want to style the "p" which does not have nor id neither class, i want to do it in a way that it does not style the other "p" tags.
my "p" has a child with id (#captcha_code). i guess, if i can style #captcha_code parent, it will not concern the others... but i do not know how to do it...
There is not currently a way to style an element based on whether or not it contains a particular child. The best way I can think to style the <p> in your case would be:
#commentform p:not([class]){
}
Closing your paragraphs isn't completely necessary, but it's always nicer to read. Additionally, you shouldn't add a closing tag for your input in HTML:
<form id="commentform">
<p class="class1"></p>
<p class="class2"></p>
<p>
<input id="captcha_code">
</p>
</form>
JSFiddle
To keep it simple, this can't be done.
Unlike the child selector >, There is no (and will probably never be) a parent < selector in css.
Have a look at this article to see why.
Try this:
p > input {
// style for that..
}
Using this, the style will be applied to the parent of the input.
Fiddle for this: http://jsfiddle.net/afzaal_ahmad_zeeshan/WyV7A/
Im building a football app (using phonegap, backbone, require and topcoat.io) allowing users to pick their man of the match (MOTD).
In the MOTD template, I want to display the player name, position, a link to their full external profile and a radio button. The HTML looks like:
<li class="topcoat-list__item">
<div class="player-container">
<div class="player-details">
<label for="player_516" class="topcoat-radio-button">
<input type="radio" name="player_id" id="player_516" value="516">
<p>Robin van Persie</p>
<p>Forward</p>
</label>
</div>
<div class="player-more">
<a target="_blank" href="http://www.premierleague.com//en-gb/players/profile.overview.html/robin-van-persie">More</a>
</div>
</div>
</li>
The CSS is:
.player-more{
width:48%;
float:left;
}
.player-details{
vertical-align: middle;
float:left;
width:48%;
}
But it comes out looking like so on a mobile:
list example http://match.webintelligence.ie/img/motm.png
Maybe I'm trying to include too much information in each list item. Any suggestions as to how I could present this better? Maybe I dont need the radio buttons. Instead, if a user clicks anywhere on the list, it will highlight it and this will be their selection. Except if the click "more", in which case the external link will show...
This happens because your p elements are block-level elements. This means they will occupy their own line. Change the p to an inline element.
p.player-name {
display: inline;
}
Or use a span element, which is inline by default.
I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}