I have an html page with divs that have id(s) of the form s1, s2 and so on.
<div id="sections">
<div id="s1">...</div>
<div id="s2">...</div>
...
</div>
I want to apply a css property to a subset of these sections/divs (depending upon the id). However, every time I add a div, I have to add the css for the section separately like this.
//css
#s1{
...
}
Is there something like regular expressions in css that I can use to apply style to a set of divs.
You can manage selecting those elements without any form of regex as the previous answers show, but to answer the question directly, yes you can use a form of regex in selectors:
#sections div[id^='s'] {
color: red;
}
<div id="sections">
<div id="s1">one</div>
<div id="s2">two</div>
<div id="s3">three</div>
<div id="t1">four</div>
</div>
That says select any div elements inside the #sections div that have an ID starting with the letter 's'.
See fiddle here.
W3 CSS selector docs here.
As complement of this answer you can use $ to get the end matches and * to get matches anywhere in the value name.
Matches anywhere: .col-md, .left-col, .col, .tricolor, etc.
[class*="col"]
Matches at the beginning: .col-md, .col-sm-6, etc.
[class^="col-"]
Matches at the ending: .left-col, .right-col, etc.
[class$="-col"]
An ID is meant to identify the element uniquely. Any styles applied to it should also be unique to that element. If you have styles you want to apply to many elements, you should add a class to them all, rather than relying on ID selectors...
<div id="sections">
<div id="s1" class="sec">...</div>
<div id="s2" class="sec">...</div>
...
</div>
and
.sec {
...
}
Or in your specific case you could select all divisions inside your parent container, if nothing else is inside it, like so:
#sections > div {
...
}
First of all, there are many, many ways of matching items within a HTML document. Start with this reference to see some of the available selectors/patterns which you can use to apply a style rule to an element(s).
http://www.w3.org/TR/selectors/
Match all divs which are direct descendants of #main.
#main > div
Match all divs which are direct or indirect descendants of #main.
#main div
Match the first div which is a direct descendant of #sections.
#main > div:first-child
Match a div with a specific attribute.
#main > div[foo="bar"]
You can' just add a class to each of your DIVs and apply the rule to the class in this way:
HTML:
<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>
CSS:
//css
.myclass
{
...
}
I usually use * when I want to get all the strings that contain the wanted characters.
* used in regex, replaces all characters.
Used in SASS or CSS would be something like [id*="s"] and it will get all DOM elements with id "s......".
/* add red color to all div with id s .... elements */
div[id^="s"] {
color: red;
}
Related
I have an html page with divs that have id(s) of the form s1, s2 and so on.
<div id="sections">
<div id="s1">...</div>
<div id="s2">...</div>
...
</div>
I want to apply a css property to a subset of these sections/divs (depending upon the id). However, every time I add a div, I have to add the css for the section separately like this.
//css
#s1{
...
}
Is there something like regular expressions in css that I can use to apply style to a set of divs.
You can manage selecting those elements without any form of regex as the previous answers show, but to answer the question directly, yes you can use a form of regex in selectors:
#sections div[id^='s'] {
color: red;
}
<div id="sections">
<div id="s1">one</div>
<div id="s2">two</div>
<div id="s3">three</div>
<div id="t1">four</div>
</div>
That says select any div elements inside the #sections div that have an ID starting with the letter 's'.
See fiddle here.
W3 CSS selector docs here.
As complement of this answer you can use $ to get the end matches and * to get matches anywhere in the value name.
Matches anywhere: .col-md, .left-col, .col, .tricolor, etc.
[class*="col"]
Matches at the beginning: .col-md, .col-sm-6, etc.
[class^="col-"]
Matches at the ending: .left-col, .right-col, etc.
[class$="-col"]
An ID is meant to identify the element uniquely. Any styles applied to it should also be unique to that element. If you have styles you want to apply to many elements, you should add a class to them all, rather than relying on ID selectors...
<div id="sections">
<div id="s1" class="sec">...</div>
<div id="s2" class="sec">...</div>
...
</div>
and
.sec {
...
}
Or in your specific case you could select all divisions inside your parent container, if nothing else is inside it, like so:
#sections > div {
...
}
First of all, there are many, many ways of matching items within a HTML document. Start with this reference to see some of the available selectors/patterns which you can use to apply a style rule to an element(s).
http://www.w3.org/TR/selectors/
Match all divs which are direct descendants of #main.
#main > div
Match all divs which are direct or indirect descendants of #main.
#main div
Match the first div which is a direct descendant of #sections.
#main > div:first-child
Match a div with a specific attribute.
#main > div[foo="bar"]
You can' just add a class to each of your DIVs and apply the rule to the class in this way:
HTML:
<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>
CSS:
//css
.myclass
{
...
}
I usually use * when I want to get all the strings that contain the wanted characters.
* used in regex, replaces all characters.
Used in SASS or CSS would be something like [id*="s"] and it will get all DOM elements with id "s......".
/* add red color to all div with id s .... elements */
div[id^="s"] {
color: red;
}
I have an html page with divs that have id(s) of the form s1, s2 and so on.
<div id="sections">
<div id="s1">...</div>
<div id="s2">...</div>
...
</div>
I want to apply a css property to a subset of these sections/divs (depending upon the id). However, every time I add a div, I have to add the css for the section separately like this.
//css
#s1{
...
}
Is there something like regular expressions in css that I can use to apply style to a set of divs.
You can manage selecting those elements without any form of regex as the previous answers show, but to answer the question directly, yes you can use a form of regex in selectors:
#sections div[id^='s'] {
color: red;
}
<div id="sections">
<div id="s1">one</div>
<div id="s2">two</div>
<div id="s3">three</div>
<div id="t1">four</div>
</div>
That says select any div elements inside the #sections div that have an ID starting with the letter 's'.
See fiddle here.
W3 CSS selector docs here.
As complement of this answer you can use $ to get the end matches and * to get matches anywhere in the value name.
Matches anywhere: .col-md, .left-col, .col, .tricolor, etc.
[class*="col"]
Matches at the beginning: .col-md, .col-sm-6, etc.
[class^="col-"]
Matches at the ending: .left-col, .right-col, etc.
[class$="-col"]
An ID is meant to identify the element uniquely. Any styles applied to it should also be unique to that element. If you have styles you want to apply to many elements, you should add a class to them all, rather than relying on ID selectors...
<div id="sections">
<div id="s1" class="sec">...</div>
<div id="s2" class="sec">...</div>
...
</div>
and
.sec {
...
}
Or in your specific case you could select all divisions inside your parent container, if nothing else is inside it, like so:
#sections > div {
...
}
First of all, there are many, many ways of matching items within a HTML document. Start with this reference to see some of the available selectors/patterns which you can use to apply a style rule to an element(s).
http://www.w3.org/TR/selectors/
Match all divs which are direct descendants of #main.
#main > div
Match all divs which are direct or indirect descendants of #main.
#main div
Match the first div which is a direct descendant of #sections.
#main > div:first-child
Match a div with a specific attribute.
#main > div[foo="bar"]
You can' just add a class to each of your DIVs and apply the rule to the class in this way:
HTML:
<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>
CSS:
//css
.myclass
{
...
}
I usually use * when I want to get all the strings that contain the wanted characters.
* used in regex, replaces all characters.
Used in SASS or CSS would be something like [id*="s"] and it will get all DOM elements with id "s......".
/* add red color to all div with id s .... elements */
div[id^="s"] {
color: red;
}
This would be easier to explain with an example:
I have a div ID that is used many times on my page.
I would like to style only 1 of these div's differently, without changing its name.
Is there a way to style this 1 div, if it is inside another div?
For example, my page contains many of these:
<div id="text2">Some text</div>
And the one I wish to change is:
<div id="container">
<div id="text2">Some different styled text</div>
</div>
Is this possible?
PS. This is all with Wordpress, therefore they are dynamically generated. Adding individual inline CSS with style will not work. This MUST be done in my external CSS sheet.
In your case you could treat the inner div witin a div as a child and as a result you can use this css
#container #text2 {
/* Unique Div Style */
}
It is correct that if you have an element that is being repeated a lot,, you should use a class and not an id.
If you have a lot of
<div id="text2">Some text</div>
then it should really be like this
<div class="text2">Some text</div>
If you do that then your CSS could look like this for that ONE div that you want to style differently
#container .text2 {
/* Unique Div Style */
}
Of course, provided that your container ID is unique ID.
ALSO, if you changed your code and you styled repetitive elements with classes then you could apply multiple classes to the same element..
Like so:
<div class="text2 text2new">Some text</div>
Now you could write CSS for class .text2new
.text2new{
/* make sure your css code overrides the old class*/
}
If it is important to you to have the site display correctly in older browsers multiple classes are not supported btw.
Hope this makes it clearer.
Try:
#container #text2 {
/* YOUR CSS HERE */
}
As commented above, if you want to apply the same style to multiple elements, use class instead of id. Styles could be applied to specific elements following the specified structure, which means in your case, you should be using
#container .text2 {
// styles go here...
}
If however your text2 remains an id, the style would only be applied to the first element with that particular id found.
I have an html page with divs that have id(s) of the form s1, s2 and so on.
<div id="sections">
<div id="s1">...</div>
<div id="s2">...</div>
...
</div>
I want to apply a css property to a subset of these sections/divs (depending upon the id). However, every time I add a div, I have to add the css for the section separately like this.
//css
#s1{
...
}
Is there something like regular expressions in css that I can use to apply style to a set of divs.
You can manage selecting those elements without any form of regex as the previous answers show, but to answer the question directly, yes you can use a form of regex in selectors:
#sections div[id^='s'] {
color: red;
}
<div id="sections">
<div id="s1">one</div>
<div id="s2">two</div>
<div id="s3">three</div>
<div id="t1">four</div>
</div>
That says select any div elements inside the #sections div that have an ID starting with the letter 's'.
See fiddle here.
W3 CSS selector docs here.
As complement of this answer you can use $ to get the end matches and * to get matches anywhere in the value name.
Matches anywhere: .col-md, .left-col, .col, .tricolor, etc.
[class*="col"]
Matches at the beginning: .col-md, .col-sm-6, etc.
[class^="col-"]
Matches at the ending: .left-col, .right-col, etc.
[class$="-col"]
An ID is meant to identify the element uniquely. Any styles applied to it should also be unique to that element. If you have styles you want to apply to many elements, you should add a class to them all, rather than relying on ID selectors...
<div id="sections">
<div id="s1" class="sec">...</div>
<div id="s2" class="sec">...</div>
...
</div>
and
.sec {
...
}
Or in your specific case you could select all divisions inside your parent container, if nothing else is inside it, like so:
#sections > div {
...
}
First of all, there are many, many ways of matching items within a HTML document. Start with this reference to see some of the available selectors/patterns which you can use to apply a style rule to an element(s).
http://www.w3.org/TR/selectors/
Match all divs which are direct descendants of #main.
#main > div
Match all divs which are direct or indirect descendants of #main.
#main div
Match the first div which is a direct descendant of #sections.
#main > div:first-child
Match a div with a specific attribute.
#main > div[foo="bar"]
You can' just add a class to each of your DIVs and apply the rule to the class in this way:
HTML:
<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>
CSS:
//css
.myclass
{
...
}
I usually use * when I want to get all the strings that contain the wanted characters.
* used in regex, replaces all characters.
Used in SASS or CSS would be something like [id*="s"] and it will get all DOM elements with id "s......".
/* add red color to all div with id s .... elements */
div[id^="s"] {
color: red;
}
Can somebody please explain what the selectors mean?
As far as I understand having #myId - is css for control with id=myId.
.myClass is Css for controls with class myClass.
Can somebody please explain the other combinations?
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
div.img a:hover img
selects images that are inside hovered links, that are inside div elements with class img, and gives them a blue border.
div.desc
selects divs with the class desc.
An id (#) can exist only once in a document. It is really useful to identify an element in CSS ans in JavaScript as well (should you ever need it).`
A class (.) can be used as often as it is required.
Example: you have only one header: <div id="header">Header</div>, but several articles: <div class="article">...</div>
Say you have this HTML document:
<div id="site">
<h1>Some heading...</h1>
<div class="article">
<h1>Title</h1>
<p>Some content...</p>
</div>
<div class="article">
<h1>Title</h1>
<p>Some content...</p>
</div>
</div>
The heading of the articles shouldn't be as big as the heading of the site, so we have to use a more specific selector: .article h1 {...}. This will style every <h1>element in a element of the class "article".
If we want to have an even more specific selector, we would use: div.article h1 {...}. This will only style every <h1> element in a <div> box with the class "article"
div.img a:hover img means: find me an img element which is a descendant of an a element that is currently being hovered over, which is in turn a descendant of a div element with a class name og img.
div.desc simply selects any div with a class name of desc.
Have a look at the standards definition, I always find this useful: CSS selectors at W3C.
div.img a:hover img
This will match any img tag that is within an a tag which is currently in a hover state that is within a div tag that has class="img".
div.desc
This will match any div tag with class="desc".
When items are chained like this with only spaces between them, it matches on that specific hierarchy of elements. For example, in the first one, an img tag that's not in an a tag won't be matched.
You can also delimit items with a comma, which instead of matching a hierarchy of items will match each item individually. So something like div.img, img will match any div tag with class="img" and will match any img tag.
Specifically for the :hover attribute, that's called a pseudo-class. It modifies the attribute to which it's attached (in this case an a) by looking for items of that type which are in a specific state (in this case, being hovered over).