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 answers here:
Select elements by attribute in CSS
(6 answers)
Closed 1 year ago.
Here's the link to css code I am curious about : https://codepen.io/charlesxiao/pen/NWjgQQm.
Do you know what does the following css code means?
.awesome[data-sizing="intrinsic"] {
width: min-content;
}
What's this data-sizing attribute? I can't find it anywhere.
Thanks!
Much like how your selectors can target classes (.class) and ids (#id), your CSS can also target attributes, including data-*. It's common practice for javascript to target data-* attributes rather than going through the rigmarole of adding/removing classes. There's some particulars choosing between the two.
width: min-content; simply sets the element to the smallest possible size — the word "awesome" is the largest element and that's used as the width.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
Is there a way to make a CSS Selector that matches the following?
All OBJECT elements
which have a PARAM element inside of them
The selector
OBJECT PARAM
doesn't work, as it matches the PARAM, not the OBJECT. I'd like to apply { display:none } to the objects; it's useless to apply that to the PARAMs.
(I'm aware I could pull this off with jQuery - $("object param").closest("object") - and VanillaJS - document.querySelector("object param").closest("object") - but I'm trying to create CSS rules on a page.)
To select all OBJECT containing PARAM, in CSS:
OBJECT:has(PARAM)
To select all OBJECT having a direct child PARAM, in CSS:
OBJECT:has(> PARAM)
No, what you are looking for would be called a parent selector. CSS has none; they have been proposed multiple times but I know of no existing or forthcoming standard including them. You are correct that you would need to use something like jQuery or use additional class annotations to achieve the effect you want.
Here are some similar questions with similar results:
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child
Only thing that comes even close is the :contains pseudo class in CSS3, but that only selects textual content, not tags or elements, so you're out of luck.
A simpler way to select a parent with specific children in jQuery can be written as (with :has()):
$('#parent:has(#child)');
Is there any way you could programatically apply a class to the object?
<object class="hasparams">
then do
object.hasparams
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 8 years ago.
This example shows in detail... The problem starts with:
.h:hover { background:red }
.h:hover ~ td { background:blue }
That works fine: the :hover event selector triggers the following-sibling td element. So, we can say that the ".h:hover triggers ~ td"... But, if the td element has a backward occurrence, there is no selection.
PS: note that the rolspan in the example causes a "layout with a td following-sibling" where structure have a td that is not following.
The only possibility is the #id selector. So, why does CSS not offer some operator or construction to use #id in that constraint?
SUB-QUESTION#1: is there any pure CSS solution?
(edit) Thanks #TylerH to show that sub-question#1 is not a duplicate (!).
The point here is the #id selector in a trigger-event context.
Why CSS3 or CSS4 or "?" standards are not using #id for this kind of application. Are there some standard about CSS events and a better control for manage them?
We know that there is no "previous sibling" selector, and this is an understandable problem with parse algorthims. But "find #id" algorithm (no matter if next or previous!) is so simple and so fast, there are no "parse problem" to adopt #id in a kind of "trigger selector".
SUB-QUESTION#2: there are a standardization iniciative (at CSS WG?) to do some workaround to the problem, using #id as triggered selector?
PS
The HTML label tag and for attibute deal with similar problem. A <label for="for"> not need Javascript to triggers (by click event) its correspondent <input type="checkbox" id="for"> checked... So, we can imagine an on-mouse-over correspondent event triggering in the same way,
label#from1:hover <OPERATOR> #for1 { ...do something... }
at a typical HTML form like this,
<div id="for1">
<input type="checkbox" id="mycheck"/>
<span></span>
</div><!-- tag input BEFORE tag label-->
<label id="from1" for="mycheck">Label for my styled "checkbox"</label>
The ~ selector is called the "general sibling" selector. This means it can only be used to select siblings of the appropriate element. In your case, the #c21 element does not have any siblings (brothers or sisters).
What you are asking for cannot be done with pure CSS, because it requires a parent selector (something like :has() from CSS Selectors Level 4). By "parent selector", I mean the ability to move backward up the DOM to an ancestor element, so that you can then move to the ancestor's sibling, and then to the ancestor's sibling's child element.
Think of it this way: the working selector is a boy selecting his sister. That is OK in CSS-land. However, the not-working selector is a boy trying to select his cousin. This is not OK in CSS-land, because it requires a parent selector. The boy would need to first select his parent, then his parent's brother, and then this parent's brother's son.
The fact that it is an ID rather than a class is irrelevant.
This question already has answers here:
What is this CSS selector? [class*="span"]
(5 answers)
Closed 9 years ago.
I was looking at the Twitter Bootstrap 2 CSS file and saw [class*="span"]. What does it do, and what is the name of that method?
That's the CSS attribute selector. It selects elements containing span in their class attribute.
For e.g.
<div class="myclass span-12"></div>
You could select the above element by
[class*="span"]
CSS Attribute Selector
That is a CSS attribute selector, which follows the syntax [attribute*="value"] where
"attribute" is an HTML element attribute (i.e. class) and "value" is contained somewhere within the attribute string.
Your example is a CSS selector that will match any HTML element where the string "span" is contained within the element's class name string.
For more information on CSS attribute selectors, see the following article from CSS-Tricks: http://css-tricks.com/attribute-selectors/
It means that any element that has a class and the word span is present in the class name, i.e.
<div class='span-1'></div>
<div class='my-span'></div>
[class*="span"] will select all above and more tthat contains the word span. Read more.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
Is there a way to make a CSS Selector that matches the following?
All OBJECT elements
which have a PARAM element inside of them
The selector
OBJECT PARAM
doesn't work, as it matches the PARAM, not the OBJECT. I'd like to apply { display:none } to the objects; it's useless to apply that to the PARAMs.
(I'm aware I could pull this off with jQuery - $("object param").closest("object") - and VanillaJS - document.querySelector("object param").closest("object") - but I'm trying to create CSS rules on a page.)
To select all OBJECT containing PARAM, in CSS:
OBJECT:has(PARAM)
To select all OBJECT having a direct child PARAM, in CSS:
OBJECT:has(> PARAM)
No, what you are looking for would be called a parent selector. CSS has none; they have been proposed multiple times but I know of no existing or forthcoming standard including them. You are correct that you would need to use something like jQuery or use additional class annotations to achieve the effect you want.
Here are some similar questions with similar results:
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child
Only thing that comes even close is the :contains pseudo class in CSS3, but that only selects textual content, not tags or elements, so you're out of luck.
A simpler way to select a parent with specific children in jQuery can be written as (with :has()):
$('#parent:has(#child)');
Is there any way you could programatically apply a class to the object?
<object class="hasparams">
then do
object.hasparams