This question already has answers here:
Why use an attribute selector to match classes?
(2 answers)
Closed 7 years ago.
What does it mean when something between square brackets in CSS? E.g.
input[type="radio"]
It's an attribute selector in CSS
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
more on http://www.w3.org/TR/CSS2/selector.html
Square brackets are attribute selector syntax.
Your (complete) example means "Select elements of type input which have a type attribute with the value radio" e.g. <input type="radio">
This is an attribute selector. It selects elements that have the specified attribute. You can find out more about them here: https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors
In your example: input[type="radio"]
This would match an element that looked like this:
<input type='radio'>
The selector you've given in the question means it would need all three words: The element name 'input', the attribute 'type' and the value for that attribute being 'radio'.
Browser compatibilty: This is a standard selector that is available in all browsers in common use. The only browser you may need to worry about that doesn't support it is IE6. See here for compatibility charts for this and other CSS selectors.
Hope that helps.
This is a CSS attribute selector that will only select inputs with the type set to radio, that is, it will select all of the radio buttons.
Here's an article explaining it a bit more.
Related
This question already has an answer here:
Is there a selector for 2 or more elements with the same attribute value?
(1 answer)
Closed 4 years ago.
With CSS selectors, is it possible to select elements with an attribute value that is the same as the attribute value of another specified element? For example:
<a class="important" href="foo.bar"></a>
will always appear on the page, but the href might be anything. Then further on the page may be something like this:
<li>
</li>
This list again may contain anything but could contain <a> elements with the same href="foo.bar".
I want to be able to select those <a> elements within the list that have an href attribute that matches the href attribute of any <a class="important">
Is this possible with CSS alone? I know this could of course be done in javascript by making sure those specific <a> elements within the list are created with a class attribute, but I'm interested in if there is a purely CSS solution.
yes,
syntax
[{attri}={value}]
like this
.important{
color:#0f0;
}
.important[href="bar.foo"]{
color:#00f;
}
.important[href="bar.bar"]{
color:#f00;
}
Mozilla Documentation - Attribute selectors
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 8 years ago.
I am working on an input form, with different input fields. They all get an attribute with their form.
Eg:
<input class="input-text" form="price">
or
<input class="input-text" form="percent">
I would like to add a suffix with the pseudo element ::after but cannot figure out how.
Ive already tried this CSS:
input[form="price"]::after{
content: "€";
}
and this:
input::after[form="price"]{
content: "€";
}
The problem seems to be with the ::after itself, but i cannot figure out what it is.
Pseudo classes like after and before cannot work on input elements. Why so?
Because they work only on elements which can contain html markup. An input tag doesn't.
Robert Koritnik explained this quite good in this question.
There're other questions like that and like this:
CSS :after input does not seem to work
Add CSS content image after input
Clearly saying no you cannot do that in non container tags.
According to w3 standard :after or :before can be used in only container element.
So you will have to use javascript.
See specification http://www.w3.org/TR/CSS2/generate.html#before-after-content
But there is an alternative you can use contenteditable property which makes div editable & then you can use after tag. But contenteditable is introduced in html5.
Here is a js fiddle http://jsfiddle.net/madterry/W4Y58/ . Down side is you cannot use this as form field & it is not widely supported.
The problem is, that pseude elements are only supported on container elements, but not on allready replaced elements like images or input fields.
This is because they get rendered in the element itself, which is clearly impossible on input elements.
In the W3C specification it is even defined.
This question already has answers here:
What does a dot before a variable indicate in html?
(4 answers)
Closed 8 years ago.
I am not sure if I understood it correctly. When styling in CSS like this:
body {
}
I'm referring to an element that belongs to HTML. When I write something like this:
.body {
}
I'm referring to a class name given by me. Is this correct?
You may want to have a look at the article on CSS Selectors from MDN, this is also a pretty healthy introductory article on selectors of the type you list, as well as some other important ones.
A non symbol prefixed 'word' denotes an element (body), a 'word' prefixed with a period (.) denotes a 'class' (.body)
Element selectors (called 'type' selectors) only refer to a specific type of element (e.g. body), class selectors can be applied to elements of any type, whereas something like id selectors (a hash preceding a 'word') are unique and can only be applied to a single element (i.e. one id per element, which must not be used elsewhere)
There are many types and combinations of selectors, to get an idea you may also want to read up on CSS specificity
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
Yes.
.body{
}
Would be something like this:
<p class='body'>This is text with a class of body</p>
But can also affect other elements with the class .body.
body{
}
Will affect the body element eg:
<body></body>
You can also use ID's. For example:
#body{
}
And you use this similar to a class. However only 1 ID of the same name per page.
<p id='body'>This is a body tag, but there should only ever be 1 ID per page.</p>
Take a look here for more information.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Select tag's size attribute through css?
There is a HTML select element which is multiple :
<select id="users_interdits" name="users_interdits" multiple="multiple" size="20" class="selectmultiple">
How can I write the css equivalent for this "size" attribute in the css "selectmultiple" ?
The closest you can get in the CSS height property (probably using em units).
You should add this in your stylesheet document.
select {
height:20px;
}
As Quentin suggested, there is no "direct translation" of the size attribute in CSS. Even in scenarios where CSS is commonly used with select multiple, size is still specified. An example of that can be seen here:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-multiple/
If you are going to use height instead of size so that you can style with CSS, each size increment is equal to a 10em increase in height. However, this has only been tested to work in Chrome, Firefox, and IE8+.
This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 3 years ago.
I didn’t know about the <button> tag until today.
Check this article
Inputs vs Buttons
Buttons created with the BUTTON
element function just like buttons
created with the INPUT element, but
they offer richer rendering
possibilities: the BUTTON element may
have content. For example, a BUTTON
element that contains an image
functions like and may resemble an
INPUT element whose type is set to
“image”, but the BUTTON element type
allows content.
Basically, <button> is more flexible as it can contain other tags inside it. Like,
<button type="submit"><strong>Click</strong> me, <em>user!</em></button>
You won't be able to do this with regular <input>.
You can include images in a <button> tag, but not in an <input> tag, amoung other differences
See: W3C site.
They are very similar but the <button> tag has a few extras that can be useful on the odd occasion.