I have a css class that has a couple of children and I know that the child ellement that I want to target has an id that ends with 'inner-Ct. I don't want to assign it my unique id because it will be used in many places.
<div class="totalSummary">
<div>
<div id = "form-1406-innerCt"></div> //<---- this is the one I want to target
...
<div>
</div>
It's there a way to do this using css?
You could use the $ attribute selector to match the end of the ID like:
.totalSummary div[id$="innerCt"] {
background: red;
}
jsFiddle example
See: http://www.w3.org/TR/selectors/#selectors
[att$=val] Represents an element with the att attribute whose value
ends with the suffix "val". If "val" is the empty string then the
selector does not represent anything.
You can use something like:
.totalSummary div[id$="innerCT"] {
color: gold; /* The $ indicates a string that an attribute
value ends with, in this case "innerCt" */
}
Example: http://jsfiddle.net/xgRk7/
Related
I want to have a class cX where x is a number between 0 and 100. I could add c0 to c100 to my css. But well, I'd like to avoid that.
I know there are ways to match element attributes like h2[rel="external"]. But is it also possible to match class names? Would it also possible to use the matched value within the rule?
Example
.c[x] { height: x%; }
EDIT - CSS attr
After a bit of research, I found that there is a CSS function called attr which is exactly what you are looking for, however, its support is currently limited to the CSS content property and not others, however, it is interesting to keep an eye on it, I reckon it will be the solution of the future
From Moz MDN:
The attr() CSS function is used to retrieve the value of an attribute
of the selected element and use it in the style sheet. It can be used
on pseudo-elements too and, in this case, the value of the attribute
on the pseudo-element's originated element is returned.
Your code would probably look like this:
.c { height: attr(data-height %, 0); }
HTML
<div class="c" data-height="1"></div>
...
This will get the height from the element's data attribute and sets it with the % percentage unit and falls back to 0 if data-height is not found.
Current supported methods:
From the W3 Docs:
6.3.2. Substring matching attribute selectors
Three additional attribute selectors are provided for matching
substrings in the value of an attribute:
[att^=val]
Represents an element with the att attribute whose value
begins with the prefix "val". If "val" is the empty string then the
selector does not represent anything.
[att$=val]
Represents an element
with the att attribute whose value ends with the suffix "val". If
"val" is the empty string then the selector does not represent
anything.
[att*=val]
Represents an element with the att attribute
whose value contains at least one instance of the substring "val". If
"val" is the empty string then the selector does not represent
anything. Attribute values must be CSS identifiers or strings. [CSS21]
The case-sensitivity of attribute names in selectors depends on the
document language.
As discussed in the comments, there is no pure CSS solution at the moment, you could try one of the following approaches:
SASS
#for $i from 1 through 100 {
$height: percentage($i/100);
.c#{$i} {height: $height;}
}
Output:
.c1 {height: 1%;}
.c2 {height: 2%;}
.c3 {height: 3%;}
...
LESS
.c-gen(#index) when (#index > 0){
.c#{index}{
height: #index * 1%;
}
.c-gen(#index - 1);
}
.c-gen(100);
LESS code by Harry
Server Side
You could make your server side script output inline CSS for each item
PHP Example:
<?php
for ($i = 1; $i <= 100; $i++) {
echo "<span height='".$i."%'>".$i."</span>";
}
?>
Output
<span height="1%">1</span>
...
jQuery
var i = 0;
$('.c').each(function() {
i++;
$(this).attr('height', i + '%');
//console.log(i); //debug
});
I have a question.
I have elements something like this:
<a> element with id = someGenerated Some:Same:0:name
<a> element with id = someGenerated Some:Same:0:surname
<a> element with id = someGenerated Some:Same:1:name
<a> element with id = someGenerated Some:Same:1:surname
I need CSS selector to get names. The problem is that I don't know how to get it.
I tried a[id*='Some:Same'] - it returned all <a> elements. After I can get elements which id ends with name. But I don't like this idea. I think that it can be done with some other selector.
Try this:
a[id*='Some:Same'][id$='name']
This will get you all a elements with id containing
Some:Same
and have the id ending in
name
<div id='element_123_wrapper_text'>My sample DIV</div>
The Operator ^ - Match elements that starts with given value
div[id^="element_123"] {
}
The Operator $ - Match elements that ends with given value
div[id$="wrapper_text"] {
}
The Operator * - Match elements that have an attribute containing a given value
div[id*="123_wrapper"] {
}
The only selector I see is a[id$="name"] (all links with id finishing by "name") but it's not as restrictive as it should.
I want to modify class of an element for specific parent. Here is what I have:
<form id="form2">
<div class="blueform">
<div class="formlegend">
...
</div>
</div>
</form>
I would like to override class formlegend only for form with id "form2". I have tried:
#form2.formlegend {
padding: 10px;
}
but it does not work. Is this even possible?
You are missing the "descendant combinator" (whitespace, usually just a single space character) between the 2 selectors:
#form2 .formlegend {
padding: 10px;
}
Without the descendant combinator, your selector will match an element with an ID of form2 and a class of formlegend. According to the markup in your question, you need it to match an element with the class formlegend that is a descendant of an element with an ID of form2.
You can try
#form2 .blueform .formlegend { }
if this does't work, you have to add additional element with unique ID ( ID always should be unique ). Two ID call override one ID call so it would look like
#override #form2 .formlegend { }
Yes, but make sure your override class is declared after your originale class in your CSS
I can't work out what this is:
Line 33 of http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css
.row [class^="span"] {
display: inline;
float: left;
margin-left: 20px;
}
I understand the style but I've never seen this before
[class^="span"]
This means a class beginning with the word "span", such as:
<div class="spanning"></div>
The ^ symbol is taken from regular expressions, wherein this symbol refers to the beginning of a string.
It should be noted that this checks for the beginning of the class attribute, not the beginning of the classname. Which means it will not match said selector:
<div class="globe spanning"></div>
The above element has two classes, the second of which begins with "span" - but since the attribute class begins with "globe", not with "span", it will not match.
One could use [class*=span], which would return all classes containing span, but that would also return other classes, such as wingspan.
AFAIK, the way to get classes that begin with a string are to use a double selector:
.row [class^="span"], .row [class*=" span"]{}
This will return the class beginning with span, whether at the beginning of the attribute, or in the middle.
(I also recall working in a solution in the homegrown selector engines used by DOMParser).
That is an attribute selector, specifically one of the CSS3 substring-matching attribute selectors.
This rule applies styles to any element whose class attribute begins with span (^= means "starts with"), that occurs in any element with the class row.
That is a CSS attribute Selector.
Have a look at http://www.w3.org/TR/css3-selectors/ (Section 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly
with the string "bar"
What does this format do in CSS:
p[class|=abc]
and
#pTag a[href^="https://"]
I'm not able to search for it as I don't know the exact terminology for this.
Any help with some links to study on these square brackets thing would be greatly appreciated.
Thanks in advance.
They are Attribute selectors. Read the link for more information.
Please note that the last CSS example is a CSS3 selector.
Selectors
E[lang|="en"] Matches any E element
whose "lang" attribute has a
hyphen-separated list of values
beginning (from the left) with "en".
.
[att^=val]
Represents an element with the att attribute whose value begins with the
prefix "val". If "val" is the empty
string then the selector does not
represent anything.
Hyphen [|=] Attribute Selector:
The hyphen (-) is used primarily as a delimiter for language codes.
<style>
.test { display:none; }
[lang|="en"] { display:block; }
</style>
<div class="test" lang="en-us">Test for [|=] (Hyphen) succeeded.</div>
Prefix [^=] Attribute Selector:
<style>
.test { display:none; }
[attr^="B"] { display:block; }
</style>
<div class="test" attr="Blue">Test for [^=] (Prefix) succeeded.</div>