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/
Related
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>
I have the following code in HTML:
<span>
<a href="#">
<span class="caption">
<p id="first">Text1</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing1.jpg" width="218" height="181"
alt="thing1"/>
</a>
</span>
<span>
<a href="#">
<span class="caption">
<p id="first">Text2</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing2.jpg" width="218" height="181"
alt="thing2"/>
</a>
</span>
This code is used for making an overlayed text transition for images in CSS, but if I want to validate this HTML code, it says I have a duplicate ID (here "first" and "desc") but I honestly wouldn't know how I can simplify this. I need to resize "first" with font-size, and "desc" too.
For example: the paragraph with id "first" has to be 14px, and the paragraph with "desc" has to be 12px.
Only those <"p"> (without the quote) elements can not be a child element in the "span" element.
I wouldn't know how to solve this, do you guys have a solution?
Thanks for the answers, I've already changed the ID's to a class.
Still, I wouldn't know how to resize class "first" and "desc" in two different font sizes, because it's apparently "not done" to put a block element in an inline element
EDIT 3: Solved! Using div's is the best solution, I'm using this for school (kind of a project) for making a gallery. With float: left; I can place those images next to eachother.
Thanks for the tips!
You've made several mistakes:
id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.
That is due to the element type.
<p> tag is block level element
<span> tag is a inline element
Therefore encapsulating a block level element inside an inline level element is incorrect.
Because you can use classes.
Change:
1.
id="first" -- into --> class="first"
id="desc" -- into --> class="desc"
2.
You cannot put another tags into a span tag except <i>, <b>, <strong>, and <br /> ...
With <br/ > you can have 2 lines in your span tag
Just change it to:
<p class="first">
and
<p class="desc">
EDIT:
You best remove the spans completely. You don't need them. If you feel you need them to wrap block-level elements, you can do that with divs
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
Is p div.myclass a valid CSS selector?
I'd like to select div.myclass but only when it is a descendent of p.
<body>
<div class="myclass">Do not select</div>
<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>
</div> <!-- added this after question was answered -->
</body>
It's a valid selector, yes; but a div is not a valid child of a p element. So the CSS is valid, but the HTML to which you're applying that selector is invalid.
Incidentally, apart from the nested div within the p, you've also got an unclosed div wrapping the p, which is followed by the </body> tag. So your HTML is doubly-invalid, as tags must be closed in the reverse order in which they're opened.
Addenda, as raised in the comments (I wasn't going to bother adding this originally, instead planning to focus on the syntax of the CSS), the browser (certainly Chromium 24/Ubuntu 12.10) 'rescues' your HTML when it constructs the DOM, so you go from this:
<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>
To a DOM that looks like this (again, in Chromium 24/Ubuntu 12.10):
<p>
<any>...</any>
</p>
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
<p></p>
JS Fiddle demo.
Therefore if the problem you have, and the reason you're asking the question, is that the CSS isn't selecting/styling an element, the reason is simply because you're using invalid HTML, and the browser's changing your HTML while constructing the (valid) DOM, which means the selector no longer matches what you were originally targeting.
This is why HTML validity rules should be followed, it makes it easier to work with (both today, and in future when you, or someone else has to, revisit).
Oh, and finally, also the & character should not be used in HTML directly, it should be encoded in some way, such as &, because the & character is the first character in HTML character-entity codes. So...you've created triply invalid HTML.
I am trying to define styling for second sibling's child element based of first sibling's class.
Here is an example of what I am trying to achieve
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?
Help much appreciated.
Thanks,
Medha
As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:
HTML
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
CSS
.one.edit + .two .change { color: green; }
If not, you could easily accomplish what you're after with a little JavaScript.
Here You can find answer:
Complex CSS selector for parent of active child
Short answer copied from link:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that
satisfies certain criteria. A more advanced selector scheme (such as
XPath) would enable more sophisticated stylesheets. However, the major
reasons for the CSS Working Group rejecting proposals for parent
selectors are related to browser performance and incremental rendering
issues.
Update:
Now I notice the edit class required in the child. You cannot.
simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.
More here:
CSS selector for "foo that contains bar"?
.
Original:
Depending on which browsers you care about, this may work:
div.one + div.two > div.change {
color: green;
}
Reference:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live Example:
http://jsfiddle.net/Meligy/NVjq6/