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>
Related
If the HTML has elements like this:
id="product42"
id="product43"
...
How do I match all of those id's starting with "product"?
I've seen answers that do this exactly using javascript, but how to do it with only CSS?
[id^=product]
^= indicates "starts with". Conversely, $= indicates "ends with".
The symbols are actually borrowed from Regex syntax, where ^ and $ mean "start of string" and "end of string" respectively.
See the specs for full information.
I'd do it like this:
[id^="product"] {
...
}
Ideally, use a class. This is what classes are for:
<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>
And now the selector becomes:
.product {
...
}
Use the attribute selector
[id^=product]{property:value}
I want to share this solution too, maybe in the future it could help someone.
As the others said you can write [id^=product] for id
But we can give an example for the class as well:
[class^="product-"] which indicates classes starts with product
and also * like this [class*="product-"]
This is a simple example :
/* Icons */
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'mk-font' !important;
font-size: 3em;
}
good luck ...
I noticed that there is another CSS selector that does the same thing .
The syntax is as follows :
[id|="name_id"]
This will select all elements ID which begins with the word enclosed in double quotes.
I am trying design a css for a dynamically generated Label. I am trying to write css for For attribute of label which can have the anything+Textbox. My prefix can be anything and suffix remain same. and I tried this
label[for=*+"TextBox"]
{
color:#DD4B39;
font-size:smaller;
}
How to write css for above situation? Any help are surely appretiated.
CSS selector
This will select every <label> element whose for attribute value contains "TextBox"
label[for*="TextBox"]{
color:#DD4B39;
font-size:smaller;
}
This will select every <label> element whose for attribute value ends with "TextBox"
label[for$="TextBox"]{
color:#DD4B39;
font-size:smaller;
}
css Selector
label[for$="TextBox"]
{
color:#DD4B39;
font-size:smaller;
}
Try doing something like this:
label[for$="TextBox"]
{
...
}
More info at link
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/
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"
I have the following
<p class="main yellow">Hello World</p>
I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?
Eg. the following doesn't work, but would be what I'm after
.main + .yellow { color:green }
This should grab it:
.main.yellow { color:yellow; }
Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.
You just need to specify them as
.main.yellow { color: green; }
No space between the two classes.
does this work for you?
.main.yellow{
color:green;
}
As others have already said, what you want is:
.main.yellow { color:green; }
However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.
Your example would have matched the following HTML...
<p class="main">Hello</p>
<p class="yellow">World</p>
...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".