I know its simple but:
fieldset label.inline
does mean that all labls with the class inline inside an element with the class fieldset will be targeted?
It means that all labels with the class inline inside a fieldset element will be targeted.
Check out fieldsets
.fieldset means class="fieldset"
#fieldset means id="fieldset"
fieldset means <fieldset>
It will select all labels, with a class of inline, inside all fieldsets. DEMO
<fieldset>
<label class="inline">
</label>
<label class="outline">
</label>
</fieldset>
It means that all <label class="inline"> inside <fieldset> will be addressed.
Matches the labels with class "inline" inside all the fieldsets.
This selector means:
Find all the tags 'fieldset'.
Within them find all the tags 'label' having class 'inline'.
Apply styles (or functions, if you use CSS selectors eg. in jQuery to apply functions) to the elements matched in point 2.
selectoracle will explain this and other selectors
Selects any label element with a class attribute that contains the word inline that is a descendant of a fieldset element
Related
Here's my HTML setup:
<div class="form-item">
<input type="checkbox" id="my-check">
</div>
<div class="form-item">
<label for="my-check">I'm a checkbox</label>
</div>
Is there any way in all the world of CSS to style that label based on whether or not the checkbox is checked? (Without changing the current HTML structure?)
Unfortunately, you cannot use CSS to style your label based on the state of your checkbox without changing your HTML. As of now, CSS selectors support child selectors and sibling selectors, but no selectors to style the child of one element based on the child of another element. You can find the whole list of CSS element combinators at: http://www.w3.org/TR/css3-selectors/#combinators.
I have this label and checkbox
<label><input type="checkbox" id="SameAsPrimaryAddress" />Same As Primary Address</label>
Is there a CSS selector that will only affect the label text and not the checkbox or do I have to separate my label from the input or give the label an ID or class to be able to do this?
It depends
In that case and if you only need that HTML, you can.
But
It is better to wrap your text with a span or a div to avoid problems you can encounter.
Here's a demo
http://jsfiddle.net/6aS4k/
Then you can add style with label span {}
Your answer: No. There is no selector to only target the free floating text of an element, without affecting the inherited properties of other elements within. To explicitly style your text, you would actually want to wrap your text in another element to target in your CSS, like a span.
However, in your specific case, that checkbox does not have many (if any) inherited properties in most browsers default stylesheet. So, a long as you aren't using a reset stylesheet or otherwise normalizing that input to inherit style properties you could get away with styling the label to affect only the text.
In the end, I would recommend that your label should actually correspond to your input separately, which would also semantically make sense. This would also allow you to make use of the for attribute, which will allow clicking on your label to toggle the corresponding checkbox as well, which is a win for usability!
<div>
<input type="checkbox" id="SameAsPrimaryAddress" />
<label for="SameAsPrimaryAddress">Same As Primary Address</label>
</div>
Arent there any CSS stylings for textarea in CSS bootstrap?
<input type="text" > has various classes that can be applied to it, but nothing for textarea?
You can give it a class of .form-control in a form which gives it the 'bootstrap' look like other inputs.
Example:
<textarea class='form-control'>Test</textarea>
You can however still add some classes to the parent div:
has-warning
has-error
has-success
Most styling classes you can give an input's parent, you can give to a textarea's. However, classes applied to textarea's parents like has-feedback will have varied results.
Example: bootply
I have the following html form
<div>
<p>Field1</p>
<input type="text" name="fld_one" id="fld_one" value="" />
</div>
<div>
<p>Field2</p>
<input type="text" name="fld_two" id="fld_two" required value="" />
</div>
I want to use CSS to mark required fields like so
div input[required]:before { color: #f00; content: "*"; }
However this css line does not make a visible change in the document.
For reference I was able to modify all required fields with the following:
div input[required] { background-color: #000; }
TL;DR - Can the :before pseudo-class be used with an attribute selector? If so, how?
:before is a pseudo-element, not a pseudo-class. It can be used with an attribute selector, but you can't use it with input elements with some browsers because it is a replaced element. (Some browsers, because it's not very well-defined whether they're supposed to work, although most lean toward "no".)
The reason why your attribute selector works is because you're applying styles to the input element itself, which works consistently in every browser.
Pseudo elements do not work with input elements, as they have no content.
From the specs:
Authors specify the style and location of generated content with the
:before and :after pseudo-elements. As their names indicate, the
:before and :after pseudo-elements specify the location of content
before and after an element's document tree content. The 'content'
property, in conjunction with these pseudo-elements, specifies what is
inserted.
Input elements have no childNodes in the DOM, hence, no content property to insert into.
As a possible workaround, apply the stars to the labels instead of the input elements
:before is not valid on <input> as it doesn't have "content" - see: CSS content generation before or after 'input' elements for a full explanation.
The "traditional" way of doing it is inserting the * on p or label (label is more semantic).
What I am using in CSS is
form fieldset
{
height : 300px;
}
but I have
<fieldset><legend>ONE</legend></fieldset>`
<fieldset><legend>TWO</legend></fieldset>
The problem is both field sets are being applied the same height.
Is there a way to apply different heights to different fieldsets from CSS. I am not looking for inline styles which I know how to apply.
Give each fieldset an ID if you will only use each ONCE, otherwise use a class
<fieldset id="f1">
</fieldset>
<fieldset id="f2">
</fieldset>
OR
<fieldset class="bluefieldset">
</fieldset>
<fieldset class="grayfieldset">
</fieldset>
A class signifies that many elements can use it. with Id in W3C it is the standard that the Id attribute be unique to the page
In CSS you reference a class like
.bluefieldset{}
OR
fieldset.bluefieldset{}
for the ID you use the hash like
#f1
OR
fieldset#f1{}
Use css :first-child selector (http://www.w3schools.com/css/pr_pseudo_first-child.asp)
This doesn't work in IE6