I have a lot of the same elements on a page that is not under my direct control (so i can't change the HTML). This might look like this:
<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
...
<div class="item">This text should be black</div>
I want to write a css rule that targets all elements with class item that have an id.
I can do
#brand_one, #brand_two, ... { color:red; }
But the id's go into the hundreds, so that's not an option.
What i'm looking for is a rule something like this:
.item[id] { color:red; } / .item# { color:red; }
I know this is possible in Javascript, but does this exist in CSS?
Yes, this is possible using CSS attribute selectors:
.item[id] {
/* any elements with a class .item and an ID attribute */
}
Yes, this exists. In you case you should use:
div[id*="brand"] { color: red; }
This selects all divs with an id that contains brand and colors it red.
Edit: You can also, to make sure it only targets ids with brand_ in the start of the id-name, use the following:
div[id^="brand_"] { color: red; }
This will avoid that other divs in the future that have an id that contains brand will also be targeted.
Edit 2: To make it even MORE specific, you can target only ids that are following the class="item":
div[id^="brand_"].item { color: red; }
This targets all divs with brand_ in the beginning of the id and have item as a class.
You can try using css attribute selector:
div.item {
color: black;
}
div.item[id^='brand_'] {
color: red;
}
div.code {
text-transform: uppercase;
}
div.code[id^='brand_'] {
color: blue;
}
<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
<div class="item">This text should be black</div>
<div class="code">This text should be in caps</div>
<div class="code" id="brand_three">This text should be in caps and blue color</div>
Here, [id^='brand_'] refers to id starting with brand_. There are also $(ends with) and *(contains) expressions.
We can use
.item[id^="brand"]{
color:red;
}
^= indicates "starts with". So we can search id which starts with "brand".
CSS [attribute^=value] Selector
The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.
So in your case ;
<style>
[id^="brand"] {
color:red;
}
<style>
Refer to:
w3schools
Try it yourself
Here's another way to do it.
<style type="text/css">
.item:not([id='']) {
color:red;
}
</style>
But it assumes you can set id='':
<div class="item" id="">This text should be black</div>
Not sure how this would work when id is unspecified as in your case.
Related
I have a lot of the same elements on a page that is not under my direct control (so i can't change the HTML). This might look like this:
<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
...
<div class="item">This text should be black</div>
I want to write a css rule that targets all elements with class item that have an id.
I can do
#brand_one, #brand_two, ... { color:red; }
But the id's go into the hundreds, so that's not an option.
What i'm looking for is a rule something like this:
.item[id] { color:red; } / .item# { color:red; }
I know this is possible in Javascript, but does this exist in CSS?
Yes, this is possible using CSS attribute selectors:
.item[id] {
/* any elements with a class .item and an ID attribute */
}
Yes, this exists. In you case you should use:
div[id*="brand"] { color: red; }
This selects all divs with an id that contains brand and colors it red.
Edit: You can also, to make sure it only targets ids with brand_ in the start of the id-name, use the following:
div[id^="brand_"] { color: red; }
This will avoid that other divs in the future that have an id that contains brand will also be targeted.
Edit 2: To make it even MORE specific, you can target only ids that are following the class="item":
div[id^="brand_"].item { color: red; }
This targets all divs with brand_ in the beginning of the id and have item as a class.
You can try using css attribute selector:
div.item {
color: black;
}
div.item[id^='brand_'] {
color: red;
}
div.code {
text-transform: uppercase;
}
div.code[id^='brand_'] {
color: blue;
}
<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
<div class="item">This text should be black</div>
<div class="code">This text should be in caps</div>
<div class="code" id="brand_three">This text should be in caps and blue color</div>
Here, [id^='brand_'] refers to id starting with brand_. There are also $(ends with) and *(contains) expressions.
We can use
.item[id^="brand"]{
color:red;
}
^= indicates "starts with". So we can search id which starts with "brand".
CSS [attribute^=value] Selector
The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.
So in your case ;
<style>
[id^="brand"] {
color:red;
}
<style>
Refer to:
w3schools
Try it yourself
Here's another way to do it.
<style type="text/css">
.item:not([id='']) {
color:red;
}
</style>
But it assumes you can set id='':
<div class="item" id="">This text should be black</div>
Not sure how this would work when id is unspecified as in your case.
I have the following situation:
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
...... and so on
</div>
My requirement is to access all div having id $=menu inside myMenu except menu0, as my menu can have like 10 to 15 item so one way is to do:
#myMenu > menu1 {style}
#myMenu > menu2 {style}
so on... 15 times
but as I have to give same style to all of them , it seems unnecessary , I am looking for CSS selector which will fit correctly for my requirement also having compatible to IE8.
Any help is greatly appreciated.
If you always have the #menu0 element, you can use the general sibling selector that is IE8 compliant:
#menu0 ~ [id^="menu"] {
color: red;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
</div>
or use classes (along with ids) that would fit better.
This css3 rule will get the list without #menu0:
div#myMenu > div:not(#menu0)
{
}
Alternately, you can use these two:
div#myMenu > div
{
/*new values*/
}
div#myMenu > div#menu0
{
/*reset with the original values*/
}
This code will hit all the children divs, then the second rule will override the prior one because it is later in the cascade and reset #menu0 to its original condition.
You can use class but also you can:
#myMenu div[id^="menu"]:not(#menu0) {
color: red;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
<div id="menu3">stuffs</div>
<div id="menu4">stuffs</div>
<div id="menu5">stuffs</div>
</div>
This one selects all id which start with word 'menu' and is child of element with id #myMenu but exclude element with id #menu0
After comment for older browsers e.g. ie8 you can use:
#myMenu div[id^="menu"] {
color: red;
}
#myMenu #menu0 {
color: #000;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
<div id="menu3">stuffs</div>
<div id="menu4">stuffs</div>
<div id="menu5">stuffs</div>
</div>
Because id is unique.
add another class:
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1" class="sub">stuffs</div>
<div id="menu2" class="sub">stuffs</div>
...... and so on
</div>
and select:
#myMenu > .sub{ ... }
or simplicity
#myMenu .sub{ ... }
If, as implied from the comments to the question, it's always the first child that should not be selected:
/* selects all the <div>s with an id beginning with 'menu',
that follow a <div> with an id beginning with menu, that
are the direct-children of the element with an id of 'myMenu': */
#myMenu > div[id^=menu] + div[id^=menu] {
/* css here */
}
Or:
/* selects all <div> elements that are not the :first-child
that are direct children of <div id="myMenu">: */
#myMenu > div:not(:first-child)
/* css here */
}
Or:
/* selects all <div>s with an id beginning with menu that
have a previous sibling <div> with an id beginning with
'menu' that is the direct child of <div id="myMenu">: */
#myMenu > div[id^=menu] ~ div[id^=menu]
/* css here */
}
<div class="rightsidebox">
<div class="item-info-list">
<p>Model: AIDCU</p>
<div class="product-details">
<p></p>
<div class="price-box"> <span class="regular-price" id="product-price-1617-related">
<span class="price">$8.99</span></span>
</div>
<p></p>
</div>
</div>
I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes
I can use div.rightsidebox>div.item-info-list
but I cannot go further because of the paragraph in there
how can I solve it? I have weakness in using ">" and multiple classes in each other
This I believe is what you are looking for:
div.rightsidebox>div.item-info-list>div.product-details {
background:#ff0000;
}
JSFiddle: http://jsfiddle.net/RF5e7/
If you merely just want to select the price and make it green if it is contained by rightbox:
.rightsidebox .price {
color: green !important;
}
.rightsidebox .price { color: green !important; } // important to override other styles
EDIT: Usage of > - selectorr
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info
div.rightsidebox>div.item-info-list .price{
color: green;
}
JSFiddle example.
.rightsidebox .item-info-list p {
/* code */
}
This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).
You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.
You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
I'm trying to write a style but am having trouble identifying a class of element identified by an ID such as airbus.errors (first example) or boeing.errors (second example below).
<div class="message">
<span id="airbus.errors">
</div>
I've tried this but it doesn't work:
.message .errors
{
background: red;
}
I need to write it generically so that it would also work with this case:
<div class="message">
<span id="boeing.errors">
</div>
You could use the CSS3 Attribute Selector:
[id$=errors] { ... }
This will select any element whose id ends with the value "errors".
Note that browser support is a little iffy.
I think you were trying to have errors as a class instead of in ID attribute. You can do:
<div class="message">
<span id="boeing" class="errors">
</div>
It would work the CSS selector you already have:
.message .errors {
background: red;
}
When you write .message .errors it's looking for an element with a class message and descendants with a class errors which doesn't match your HTML
Try this instead:
.message #boeing-errors
{
background: red;
}
or just
#boeing-errors
{
background: red;
}
since #boing-errors is an ID and should be unique.
Note that in CSS the . character is reserved for class names
If you have no control of this ID being output you can't use it since the ID has a . in it. You can do this, but it might be too generic:
.message > span { background: red; }
Here's another question on SO for valid css characters: Which characters are valid in CSS class names/selectors?
Your names are invalid. CSS class and id names should only be alphanumeric values and can include a - or _. Check the docs for the full naming convention syntax.
Drop the ., example: <span id="airbus_errors">
However, by your CSS, I think what you are meaning to do is share an errors class. In which case, this should be your markup:
<div class="message">
<span id="boeing" class="errors">
</div>
If you want it to work for both, then you need to give them a common class. IDs are unique, so you'd have to specify #airbus.errors, #boeing.errors {...}, etc. To do it in one CSS rule you need to give them both a common class such as errors.
.message .errors {
background: red;
}
<div class="message">
<span id="airbus" class="errors">
</div>
<div class="message">
<span id="boeing" class="errors">
</div>
If you can't make it a class for some reason, then you have no choice but to be explicit and set it for each ID unless you use CSS3 attribute selectors.
.message #airbus.errors,
.message #boeing.errors {
background: red;
}
If you're developing for browsers which support CSS3 (so not IE), then you can achieve what you want with this, (see CSS3 spec for more info)
.message span[id$="errors"] {
background: red;
}
Try the attribute selector and its variations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="message">
<span id="airbus.errors">airbus</span>
</div>
<div class="message">
<span id="boeing.errors">boeing</span>
</div>
<div class="message">
<span id="something.errors">something</span>
</div>
<div class="message">
<span id="no.error">error</span>
</div>
</body>
</html>
Here is the CSS
[id$=".errors"]
{
color: red;
}
There's really not much you can do, especially cross-browser, to fix that kind of ugly CSS. I see one really portable alternative, and that's this JavaScript:
var spans = document.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
var id = spans[i].id;
if(id && id.length > 7 && id.substring(id.length - 7) === '.errors') {
spans[i].id = id.substring(0, id.length - 7);
spans[i].className = spans[i].className ? spans[i].className + ' errors' : 'errors';
}
}
You could then refer to your elements as span.errors in your CSS selector. This is really not a good solution, but then again, there's not much else you can do. If the IDs have to stay the same, just remove the spans[i].id = ... line. If they absolutely can't have a class then you can use some fancy JavaScript to read the CSS selector and apply inline styles based on that, too.
For example, in the following snippet:
<tr>
<td align="center">123</td>
<td class="someclass">abc</td>
</tr>
I would like select all <tr> elements that have a <td> with the class="someclass".
I am wondering if this is possible in css, without using javascript. Thanks.
What your asking for isn't possible. CSS reads left to right, meaning that you can't specify the parent element based on a childs attributes. You can do this in javascript but like you said you didn't want to use that.
Example HTML:
<div class="box">
<div class="green">
Some text
</div>
</div>
<div class="box">
<div class="red">
Some Text
</div>
</div>
Example CSS:
.box {
color: blue;
}
.box .green {
color: green;
}
.box .red {
color: red;
}
As you can see, you can select the parent element by itself but not based on a child's attributes.
Technically, you should always work outwards in. If you need a specific style to be applied on the parent you should add an extra class.
Example HTML:
<div class="box green">
Some Text
</div>
Example CSS:
.box.green {
color: green;
}
You can see in the above CSS that you can "stack" the classes to select the proper element.
Hope this helps, if you have any questions just ask. I can post a javascript variation that would be able to select an element based on child element attributes if you open a new topic for that.
To select elements with a particular class:
.someclass{
color: red;
}
I would like select all elements that
has a with class attribute
"someclass".
If by selection you mean node selection that you can only use JavaScript.
jQuery:
$(".someclass").doStuff();
But if by selection you mean CSS selection then:
CSS:
<element class="someclass"> can be selected using .someclass in CSS.