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.
Related
To select all elements that start with the class name foo. I can use:
[class^="foo"] { }
What can I use to select a custom element that starts with foo.
Example:
<foo-bar>Hola</foo-bar>
<foo-bazz>Hola</foo-bazz>
I want to have a single selector for both elements.
You can't. The [...] selectors only work on attributes, not element types themselves.
What you can do though, as I'm sure you're already aware, is chain them all into one selectors group, but this will mean that you'll need to know the exact element names:
foo-bar,
foo-bazz {
...
}
Failing that, you can always just give them all a shared class or data-* attribute:
<foo-bar class="foo"></foo-bar>
<foo-bazz class="foo"></foo-bazz>
.foo {
...
}
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 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/
#contentpage div
Does this mean select the div that has id #contentpage?
I am getting some bad layout. I am trying to select the div with the id #contentpage.
Could somebody also please tell me what the following css mean:
#myid div a
.myid a h
div #myid a
#myid div a
<anytag id="myid"><div><a rel="match">...
.myid a h
<anytag class="myid"><a><h rel="match">...
div #myid a
<div><anytag id="myid"><a rel="match">...
If you would like to match a div with id #myid, then either ignore the fact that it's a div (ids are unique anyway) or match it as follows:
div#myid
#myid div a
This will match an a within a div within an element with the id of myid. When I say "within" I mean anywhere within at any nesting level. The others are all the same but with different elements in different orders.
If you want an element with the id of contentpage you simply use #contentpage. If for some reason you wanted to specify that it was a div it would be div#contentpage.
if you want to modify the styling of the div with the id of contentpage then you would do the following
div#contentpage { //input styling here }
OR
#contentpage { //input styling here }
it also looks like you are trying to get at elements under the div these can be accessed in a number of ways but this is usually what I do
<div id="contentpage"><div><a></a></div></div>
#contentpage a { //stying }
#contentpage div a { //styling }
#contentpage {color:red} will select whichever element with id contentPage
#myid div a will select <a> elements that are inside <div> that are inside an element with id myid
.myid a h as far as I know there is no <h> element ? Without the h, it would select all links within any elements with the class myid (in this case myid is a dubious name, then, since its not an id per se)
div #myid a will select links inside of an element with id myid, but only if this element is within a <div>. It won't work if the element myid is a direct children of <body> for example
Hay I have an element like this
<span class='a.b'>
Unfortunately this class name comes from an eCommerce application and cannot be changed.
Can I style a class name with a dot in it?
like
.a.b { }
.a\.b { }
However there could be browsers around that don't support this.
Coming very late to this party, but you can use attribute selectors.
In your case, to target the class='a.b' element, you could use:
[class~="a.b"] {...}
// or
span[class~="a.b"] {...}
Additionally, here is the full list of attribute selectors.
Attribute Present Selector
// Selects an element if the given attribute is present
// HTML
<a target="_blank">...</a>
// CSS
a[target] {...}
Attribute Equals Selector
// Selects an element if the given attribute value
// exactly matches the value stated
// HTML
...
// CSS
a[href="http://google.com/"] {...}
Attribute Contains Selector
// Selects an element if the given attribute value
// contains at least once instance of the value stated
// HTML
...
// CSS
a[href*="login"] {...}
Attribute Begins With Selector
// Selects an element if the given attribute value
// begins with the value stated
// HTML
...
// CSS
a[href^="https://"] {...}
Attribute Ends With Selector
// Selects an element if the given attribute value
// ends with the value stated
// HTML
...
// CSS
a[href$=".pdf"] {...}
Attribute Spaced Selector
// Selects an element if the given attribute value
// is whitespace-separated with one word being exactly as stated
// HTML
...
// CSS
a[rel~="tag"] {...}
Attribute Hyphenated Selector
// Selects an element if the given attribute value is
// hyphen-separated and begins with the word stated
// HTML
...
// CSS
a[lang|="en"] {...}
Source: learn.shayhowe.com
Perhaps you could scan the elements for these classes and add a class that you could style.
For instance, scan all elements with the “a.b” class and then add a new “style-ab” class or some such.
I haven’t posted any example code for this as people may want to use vanilla Javascript or jQuery and it’s a simple enough thing to do.
To clarify, my gaming framework does exactly as the OP described so translations could be applied to certain divs and spans. It’s not a nasty way to decide class names, it’s just useful for people creating markup when using a dictionary that has keys for phrases
Yes you can.
The meaning of CSS class name like '.a.b' is targeting elements that have CSS name with 'a' which also has class name 'b',that's to say you have both of these class in the same element. Just as div.cssname targeting div elements with cssname.