This question already has answers here:
Handling a colon in an element ID in a CSS selector [duplicate]
(8 answers)
Closed 8 years ago.
I'm doing some css for my form that looks like:
<sf:form>
<table>
...
</table>
</sf:form>
(according to Spring framework form tag)
I want to select this form and can't do it in traditional way:
sf:form {
property: value;
}
because of the colon interpreted by css.
I know that I can add an identifier to my form, such as id or class to select it, but also it's interesting for me if there is a way to do it with some css trick. Maybe, taking the parent element of a table tag will take care of it? The sf:form could be taken as parent of a table by:
sf:form>table
But here we have this annoying colon again.
So, can I take a table parent tag without specifying the sf:form one? Or, maybe, there are another ways of dealing with such elements as colon that breaks the structure of a tag in the css case?
Use a forward slash to escape the colon after the namespace:
sf\:form > table {
property: value;
}
Example:
http://jsfiddle.net/fZm28/
Reference:
http://msdn.microsoft.com/en-us/library/ms762307(VS.85).aspx
Related
This question already has answers here:
Using regular expression in css?
(6 answers)
Closed 3 years ago.
In my HTML template I have some CSS generated classes like :
.term-1-2
.term-2-2
.term-10-0-1
Ho can I create a CSS class to include all letters after "term" like :
.term-*
How is it possible in css ?
Thank you
[class*="term-"] { /* your rules here */ }
This is called attribute selector.
It reads
"Apply the following rules to any element with a class attribute that has term- in it."
Please note that this would also match e.g. <div class="regular-term-a">. If that is a problem, go with #Roko C. Buljan's answer.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Use this rather complicated selector:
[class^="term-"], [class*=" term-"] {
}
to make sure you're targeting both
^= Starts with "term-" i.e: class="term-1-2 foo bar baz"
*= Contains (notice the leading space!) " term-" i.e: class="foo bar term-1-2 baz"
MDN: Attribute selectors
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:
CSS values using HTML5 data attribute [duplicate]
(3 answers)
Closed 9 years ago.
I use attr(data-width) to get the data-width-attribute from some list-item's. I try to use these values to set the width of that element.
The problem is that css cannot handle strings as width/height-value.
e.g.:
<foo data-width='100%'></foo>
/* can not work */
foo {
width: attr(data-width)
}
so I need to convert the value from the data-attribute to an integer (+unit).
Is that somehow possible?
No. And you cannot use an attr(...) construct as the value of a normal property, only in the value of a content property.
Instead of data-width attributes, you could use just style attributes. Not ideal, but more logical than to use data-* attributes to carry style info.
not without a precompiler and SASS / SCSS mixins
This question already has answers here:
when to leave space ,when not in CSS?
(7 answers)
Closed 8 years ago.
I applied a style to a buttonfield in a details view called ProductDetailsEditButton. I thought the name of the selector would thus be td .ProductDetailsEditButton but this didn't work. However, when I called it td.ProductDetailsEditButton (without the space), it did work.
Does there have to be a space between the two or not? Is that always the case or does it depend? Sorry, but it seems inconsistent in the naming convention and I want to know what I'm overlooking.
These are two separate things:
td .ProductDetailsEditButton
means "an element with the class ProductDetailsEditButton that is a child of a td"
td.ProductDetailsEditButton
means "a td element with the class ProductDetailsEditButton"
When there is a space it means that the selector will match child elements of a <td> that have class="ProductDetailsEditButton". For example:
<td>
<div class="ProductDetailsEditButton">Button</div>
</td>
When there is no space it will match <td class="ProductDetailsEditButton">.
well in your selector you are referring to a "td", is you class set on the actual button element or is it set on the parent td container? If it is set on your button and only that button you would be able to reference it in your css using
input.ProductDetailsEditButton
if you wanted to be very specific or simply
.ProductDetailsEditButton
if it can be applied to many more elements other than the button
When you use a space in between td .ProductDetailsEditButton you say give me the ProductDetailsEditButton that is child of a td.
When you write it without a space td.ProductDetailsEditButton you say give me the td that has the class ProductDetailsEditButton.
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