I have this elements in html:
<div id="element0div0">
div 0
</div>
<div id="element1div1">
div 1
</div>
<div id="element2div2">
div 2
</div>
can i use something like regex to apply css to element like element{n}div{n}?
There's no regular expression to differentiate between numbers and letters, but you can definitely approach a solution using:
div[id^=element][id*=div] {
/* css */
}
This has flaws in that this will match the following (and more) id strings:
elementdiv
elementSomeOtherStringdiv
elementdivSomeOtherString
I'd suggest, given the nature of your question, that it'd be far wiser to simply use a common class-name to all the elements to which you wish to apply a common style.
References:
CSS attribute-selectors.
Yes you can but you must use JavaScript.
Using jQuery :
$('div').filter(function() {
return this.id.match(/element[\d]+div[\d]+/)
}).css({color:'red'});
Using vanilla js :
for (var divs=document.getElementsByTagName('div'), i=0; i<divs.length; i++) {
if (divs[i].id.match(/element[\d]+div[\d]+/)) divs[i].style.color="red";
}
This assumes you need to do what you asked, that is apply a style to elements found by a regex applied to their id. Most often you can find simpler solutions, though, like adding a class when building the HTML.
Related
I would like to repeat div class several times without having to code it, and being able to target each element individually with css. Possible?
Like instead of:
<div
class="design">design</div>
<div
class="design1">design</div>
<div
class="design2">design</div>
<div
class="design3">design</div>
I would have:
<div
class="design">design</div>
X4
Is it better to use span class and is this possible to multiply too?
If I understood correctly what you want, then I think you can use nth-of-type(n). Although you'll need to repeat code in CSS... (you can avoid repeat HTML code by using Javascript, but since you didn't tagged it and not mentioned nothing about it, I think you want something in HTML and CSS only)
"The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings."
.design:nth-of-type(1){
color: purple
}
.design:nth-of-type(2){
color: blue
}
.design:nth-of-type(3){
color: red
}
.design:nth-of-type(4){
color: green
}
<div class="design">design</div>
<div class="design">design</div>
<div class="design">design</div>
<div class="design">design</div>
And about span, it depends on what you are going to do, div is naturally display:block, while span is display:inline
further read about nth-of-type: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
You could use javascript to accomplish this if you put it in a container.
<div id="div_container"></div>
<script>
let output = "";
for(i = 0; i<4; i++){
output += "<div class='design'>design</div>"
}
document.getElementById('div_container').innerHTML = output;
</script>
You can further style it using .design:nth-of-type(1) .design:nth-of-type(2) etc.
This wouldn't make sense for 4 instances of the div, but more than 10 would be easier and scales to large numbers, simply change 'i' and create the div container.
EDIT:
Define output prior to loop
In order to output your HTML without rewriting it each time, you will need to use one of the following:
An actual programming language (Such as PHP)
A framework/library (such as React)
A preprocessor/templating system (such as Haml or Pug)
Using PHP is simple enough, if you have PHP installed on your webhost (you almost certainly do).
For instance, instead of this:
index.html:
<div class="design design-0">Design</div>
<div class="design design-1">Design</div>
<div class="design design-2">Design</div>
<div class="design design-3">Design</div>
You could have this:
index.php
<?php for( $i = 0; $i < 4; $i++ ){
echo "<div class='design design-$i'>Design</div>";
} ?>
Or check out this Pug example: https://codepen.io/xhynk/pen/OJPvPMX if you would rather use a preprocessor.
For the CSS though, as #Calvin Nunes said, you can make use of the :nth-of-type() selector or even the Adjacent Sibling Combinator - though these largely make the need for the design-x type classes unnecessary, unless you have other reasons to include them.
If i understood correctly, I'll keep the record from the post upstairs, and no, you can't do it without making it repeat 4 times, each div or the group of divs in this case NEEDS something for you to work with 'em.
So I want to select the <div> element with the class .thisClass, but not any other elements with class of .thisClass:
<div class="thisClass"></div>
<p class="thisClass"></p>
CSS Selector by class name and tag: div.thisClass { ... }:
div.thisClass {
background-color: red;
}
<div class="thisClass">thisClass (div)</div>
<p class="thisClass">thisClass (p)</p>
But this is a bad way to write selectors:
Don’t qualify class rules with tag names
The previous concept also applies here. Though classes can be used many times on the same page, they are still more unique than a tag.
One convention you can use is to include the tag name in the class name. However, this may cost some flexibility; if design changes are made to the tag, the class names must be changed as well. (It’s best to choose strictly semantic names, as such flexibility is one of the aims of separate stylesheets.)
BAD
treecell.indented {…}
GOOD
.treecell-indented {…}
BEST
.hierarchy-deep {…}
Using JavaScript
document.querySelector('div.thisClass')
Using jQuery
$("div.thisClass")
Using CSS:
<style>
div.thisClass{}
</style>
The following code illustrates how to select the first class from the list of classes in both CSS and Javascript.
CSS
.thisClass:first-child {
/*css property*/
}
JAVASCRIPT:
var divElement = document.getElementsByClassName('thisClass')[0];
I have an html code as below :
<div id="select_a_boundary" class="dataset_select2">Homes name</div>
I wrote a xpath expression for the same:
//div[#id = 'select_a_boundary' and #class = 'dataset_select2']
What will be the equivalent CSS Selectors for the same?
First of all if you are using id, you don't require to use class, secondly if you are willing yo select an element with an id select_a_boundary you can use
#select_a_boundary {
/* Styles goes here */
}
Demo
Note: Am not selecting the element which has that id and that class as
here, id is sufficient as it has to be unique, if you are using the id
for multiple elements than it's invalid
As per your comment
div[id=select_a_boundary][class=dataset_select2] {
color: red;
}
Demo X-Path Equivalent
Or an easier one (Credits: Jack)
#select_a_boundary.dataset_select2 {
color: red;
}
Note: Still I would recommend you to use #select_a_boundary is more
than enough
The equivalent of your expression in CSS is this:
#select_a_boundary.dataset_select2 {
/* whatever */
}
Because identifiers in a single document should be unique, you can even narrow it down to:
#select_a_boundary {
/* whatever */
}
One important thing to realize is that although XPath and CSS selectors have many similarities, they're two different things.
For instance, there's no XPath equivalent of :active or :hover for instance. Properly matching by class names is also more cumbersome with XPath.
On the other hand, CSS can't match things like "all paragraphs with an anchor child" which is trivial in XPath using //p[a].
I have 4 elements "Block" "button1" "button2" and "label".
I want the block to have the buttons inside it by CSS. this can be done by HTML like this :
<b class = "block">
<g class="Label"> </g>
<a class="button1"> </a>
<a class="button2"> </a>
</b>
but it'll take so much space if done 50 times in one page.
and I want a way to change button1,2 'href' with as less a possible lines of code.
CSS is meant to modify the appearance of a page, and not to be used for adding content - although pseudo-elements like :before and :after are commonly used for decorative purposes (e.g. adding arrows, or for layout hacks)
Have you considered using a JS-based method? You can loop through all the .block elements and then insert the label and buttons in each of them.
An example of a JS-based method would be: (assuming that you're using jQuery)
$(document).ready(function() {
$(".block").each(function() {
// Create elements to append
var apnd = '<element></element>';
// Append the created elements
$(apnd).appendTo($(this));
});
});
The only way I can think to achieve this would be use a parameterised jQuery function that adds or modifies the "href" value of each button of a given CSS class (with minor variations of the assigned href based on a given parameter - if that suits).
Sorry, to directly address the question, I agree with the other posters in that this can't be achieved using CSS alone.
This should be simple, but I'm having trouble finding the search terms for it.
Let's say I have this:
<div class="a c">Foo</div>
<div class="b c">Bar</div>
In CSS, how can I create a selector that matches something that matches "(.a or .b) and .c"?
I know I could do this:
.a.c,.b.c {
/* CSS stuff */
}
But, assuming I'm going to have to do this sort of logic a lot, with a variety of logical combinations, is there a better syntax?
is there a better syntax?
No. CSS' or operator (,) does not permit groupings. It's essentially the lowest-precedence logical operator in selectors, so you must use .a.c,.b.c.
Not yet, but there is the experimental :is() (formerly :matches()) pseudo-class selector that does just that:
:is(.a .b) .c {
/* style properties go here */
}
You can find more info on it here and here. Currently, most browsers support its initial version :any(), which works the same way, but will be replaced by :is(). We just have to wait a little more before using this everywhere (I surely will).
For those reading this >= 2021:
I found success using the :is() selector:
*:is(.a, .b).c{...}
If you have this:
<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>
And you only want to select the elements which have .x and (.a or .b), you could write:
.x:not(.c) { ... }
but that's convenient only when you have three "sub-classes" and you want to select two of them.
Selecting only one sub-class (for instance .a): .a.x
Selecting two sub-classes (for instance .a and .b): .x:not(.c)
Selecting all three sub-classes: .x
No. Standard CSS does not provide the kind of thing you're looking for.
However, you might want to look into LESS and SASS.
These are two projects which aim to extend default CSS syntax by introducing additional features, including variables, nested rules, and other enhancements.
They allow you to write much more structured CSS code, and either of them will almost certainly solve your particular use case.
Of course, none of the browsers support their extended syntax (especially since the two projects each have different syntax and features), but what they do is provide a "compiler" which converts your LESS or SASS code into standard CSS, which you can then deploy on your site.