is there a way to select multiple div with css??
like
div id="text-box4"
div id="text-box5"
div id="text-box7"
etc
Native to ie7,ie8 and any other browser that accepts "substring matching attribute selectors" (cf. http://www.w3.org/TR/css3-selectors/), you can use the following syntax to select elements with multiple similar ids:
div[id^='text-box']
This basically says to the parsing engine, "select all div elements that have an id attribute which begins with 'text-box'
QRC:
[attribute^='text'] = attributes that STARTS with 'text'
[attribute$='text'] = attributes that END with 'text'
[attribute*='text'] = attributes that CONTAINS 'text'
CSS doesn't have a wildcard for that.
However if you use jQuery you can:
http://api.jquery.com/attribute-contains-selector/ or
http://api.jquery.com/attribute-contains-word-selector/
<div id="text-box4"></div>
<div id="text-box5"></div>
<div id="text-box7"></div>
<script>$("div[id*='text-box']").css("color", "red");</script>
like this?
#text-box4,
#text-box5,
#text-box7 {
/* your properties here */
}
CSS classes are designed for selecting multiple elements:
<div id="text-box4" class="my-text-box"/>
<div id="text-box5" class="my-text-box"/>
<div id="text-box7" class="my-text-box"/>
maerics' answer is correct. The CSS selector used to select the divs in that case would be:
.my-text-box {
/* Styles go here */
}
Related
Trying to find a pseudo class that'll target a <div> like this:
<div class="nav-previous">
</div>
I've tried :blank and :empty but neither can detect it. Is it just not possible to do?
https://jsfiddle.net/q3o1y74k/3/
:empty alone is enough.
By the current Selectors Level 4 specification, :empty can match elements that only contain text nodes that only contain whitespace as well as completely empty ones. It’s just there aren’t many that support it as per the current specification.
The :empty pseudo-class represents an element that has no children except, optionally, document white space characters.
From the MDN:
Note: In Selectors Level 4, the :empty pseudo-class was changed to act like :-moz-only-whitespace, but no browser currently supports this yet.
The :-moz-only-whitespace CSS pseudo-class matches elements that only contain text nodes that only contain whitespace. (This includes elements with empty text nodes and elements with no child nodes.)
As the others mentioned, this isn't possible with CSS yet.
You can check to see if there's only whitespace with JavaScript however. Here's a simple JS only solution, "empty" divs that match are blue, while divs that have text are red. Updated to add an empty class to the empty divs, which would allow you to target them easily with the selector .empty in your CSS.
The JS only "empty" comparison would look like this:
if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "")
And if you're using jQuery it would be a bit easier:
if( $.trim( $(element).text() ) == "" ){
var navs = document.querySelectorAll(".nav-previous");
for( i=0; i < navs.length; i++ ){
if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") {
navs[i].style.background = 'blue';
navs[i].classList.add( 'empty' );
} else {
navs[i].style.background = 'red';
}
}
.nav-previous {
padding: 10px;
border: 1px solid #000;
}
.nav-previous.empty {
border: 5px solid green;
}
<div class="nav-previous">
</div>
<div class="nav-previous">Not Empty </div>
The problem with your approach is that your container is not actually empty.
The :empty pseudo-class represents an element that has no children at
all. In terms of the document tree, only element nodes and content
nodes (such as DOM text nodes, CDATA nodes, and entity references)
whose data has a non-zero length must be considered as affecting
emptiness;
As you have empty spaces this pseudo class will not do the trick.
The :blank pseudo class should be the right one, because this is its definition:
This blank pseudo-class matches elements that only contain content
which consists of whitespace but are not empty.
the problem is that this pseudo class isn't implemented by any browser yet as you can check in the link below. So you will need to wait until it get implemented to be able to use this selector.
This pretty much explains the behavior you are facing
https://css4-selectors.com/selector/css4/blank-pseudo-class/
The best approach here is just to be sure that your div will actually be empty, so your approach will work.
the best that you can do is to define an empty class like this:
.empty{
display:none;
}
and then add this JS code here, it will append the empty class to your blank items:
(function($){
$.isBlank = function(html, obj){
return $.trim(html) === "" || obj.length == 0;
};
$('div').each(function() {
if($.isBlank(
$(this).html(),
$(this).contents().filter(function() {
return (this.nodeType !== Node.COMMENT_NODE);
})
)) {
$(this).addClass('empty');
}
});
})(jQuery);
check it working here,
https://jsfiddle.net/29eup5uw/
You just can't without JavaScript/jQuery implementation.
:empty selector works with empty tags (so without even any space in them) or with self-closing tags like <input />.
Reference: https://www.w3schools.com/cssref/css_selectors.asp
If you want to use JavaScript implementation, I guess here you will find the answer: How do I check if an HTML element is empty using jQuery?
:empty indeed only works for totally empty elements. Whitespace content means it is not empty, a single space or linebreak is already enough. Only HTML comments are considered to be 'no content'.
For more info see here: https://css-tricks.com/almanac/selectors/e/empty/
The :blank selector is in the works, it will match whitespace, see here: https://css-tricks.com/almanac/selectors/b/blank/. But it seems to have no browser support yet.
Update:
See here for possible solutions to this involving jQuery.
I've read around a little bit and have a good start to what I ultimately want. This was helpful, along with another article which I forgot the link to. However, everything I've read ADDS a CSS class or property to an element. I want to CHANGE a property of an existing CSS class, but I don't know how to target it.
I think I want to use ng-class in one of these use cases taken from the Angular documentation:
If the expression evaluates to a string, the string should be one or more space-delimited class names.
If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
My existing code uses ng-class along with some controller logic.
HTML
<div ng-controller="ngToggle">
<div ng-class="{'inset-gray-border' : style}">
<div class="subcontainer" ng-click="toggleStyle()">{{item.name}}</div>
</div>
</div>
This currently adds the inset-gray-border class to the nested div, but I just want to change the border property in the subcontainer class.
Controller
angular.module('app').controller('ngToggle', ['$scope', function($scope) {
$scope.style = false;
$scope.toggleStyle = function() {
$scope.style = $scope.style === false ? true: false;
};
}]);
I considered using a directive, but I believe that would be overkill. I think this can be achieved in a controller.
EDIT: After further research I think jQLite can do the trick, but that would probably require a directive.
CHANGE a property of an existing CSS class
Add a css rule that does that using the new class you added using ng-class. The specificity will over ride the original rule
.subcontainer{
color : blue
}
.inset-gray-border .subcontainer{
color:red
}
Instead of a big toggleStyle function, you can write that stuff in UI side only.
Here is fiddle. As you want to change border property of .subcontainer, Overwrite that property by adding .insert-gray-border
<div ng-controller="ngToggle">
<div >
<div ng-class="{'subcontainer':true,'inset-gray-border' : style}" ng-click="style=!style">{{item.name}}</div>
</div>
</div>
The benifit of this is , it uses local scope instead of controller scope.
The best bet would be to have two CSS classes defined, one for the base (untoggled) case, another with all the properties that you want for when the property is toggled on.
In this case you may want something like:
.container .subcontainer {}
.container .subcontainer-bordered { border: solid 1px #123456}
Then your HTML code be updated to reflect this structure
<div ng-controller="ngToggle">
<div class="container">
<div class="subcontainer" ng-class="{'subcontainer-bordered': style}" ng-click="style = !style">{{item.name}}</div>
</div>
</div>
I have this html code here:
<div default_name="RandomName1">
<div name="RandomName1">RandomName1</div>
<div name="RandomName2">RandomName2</div>
<div name="RandomName3">RandomName3</div>
</div>
The property default_name on parent div changes from time to time. I would like to set the child div which has name matching default_name to background-color:red.
Like:
<style>
div > div[name=default_name_of_parent] { background-color: red }
</style>
I have no control over what the name values are, users set it. Is this possible via style sheet?
Thanks
This can be done, if you make a rule containing a selector for each possible “combination”, like so:
div[default_name=RandomName1] > div[name=RandomName1],
div[default_name=RandomName2] > div[name=RandomName2],
div[default_name=RandomName3] > div[name=RandomName3]
{ background-color: red }
http://jsfiddle.net/wc5whfwa/
But j08691 is totally right with their comment – this should be avoided at all cost if possible, data- attributes would be the way to go.
How do I use regular expressions in CSS? I found a tutorial here for matching static strings in CSS, but I haven't been able to find one for using regular expressions to match multiple strings in CSS. (I found one here, but I couldn't get it to work. I also looked at the W3C documentation on using regular expressions, but I couldn't make sense of the document.)
I'm want to match a series of <DIV> tags whose ids start at s1 and increase by one (ie. #s1 #s2 #s3...).
I know that div[id^=s], div[id^='s'], and div[id^='s'] each perform the match as I intend it in my CSS. However, each of those also match an id of #section, which I don't want to happen. I believe that "/^s([0-9])+$/" is the equivalent PHP string--I'm just looking for it in CSS version.
There is no way to match elements with a regular expression, even in CSS3. Your best option is probably to simply use a class for your divs.
<style>
.s-div {
// stuff specific to each div
}
</style>
<div id="s1" class="s-div"><!-- stuff --></div>
<div id="s2" class="s-div"><!-- stuff --></div>
<div id="s3" class="s-div"><!-- stuff --></div>
<div id="s4" class="s-div"><!-- stuff --></div>
<div id="s5" class="s-div"><!-- stuff --></div>
Also remember that you can separate multiple class names by a space inside a class attribute.
<div class="class1 class2 class3"></div>
javascript:
/* page scrape the DIV s# id's and generate the style selector */
re=/<div\b[^>]*\b(id=(('|")?)s[0-9]+\2)(\b[^>]*)?>/ig;
alert(
document . body . innerHTML .
match(re) . join("") .
replace(re,"div[$1], ") + "{ styling details here }" );
alert(
("test with <div id=s2 aadf><DIV ID=123> <DIV adf=asf as><Div id='s45'>" +
"<div id=s2a ><DIV ID=s23 > <DIV asdf=as id=S9 ><Div id='x45' >") .
match(re) . join("") .
replace(re,"div[$1], ") + "{ styling details here }"
);
The test yields
div[id=s2], div[id='s45'], div[ID=s23], div[id=S9], { styling details here }
Note the dangling , and the case preserved S9.
If you don't want or can't use the solution posted by #zneak, you could do that editing the labels with javascript, but i'll advice you: It's a hell of work.
The following CSS will select #s0, #s1, ... , #s9 and not #section, though a browser must implement the CCS3 negation :not().
The final selection is equivalent to:
/^s[0-9]?.*[0-9]$/
which says that each id must start with s and a number and end with a number like:
s6, s42, s123, s5xgh7, ...
The :not() line vacuously excludes those ID's that do not start properly using an empty style {}.
<style>
div:not([id^=s0]):not([id^=s1]):not([id^=s2]):not ... :not([id^=s9]) {}
div[id^=s][id$=0], div[id^=s][id$=1], div[id^=s][id$=2], ... div[id^=s][id$=9] { ... }
</style>
CSS3 does not use regular expressions to define selectors BUT ...
CSS Conditional Rules Module Level 3
defines a very specific function, regexp(<string>), that parses a URL with a regular expression when creating an #document rule.
<style>
/* eliminate the alphabet except s - NB some funny characters may be left */
/* HTML id's are case-sensitive - upper case may need exclusion & inclusion */
div[id*=a], div[id*=b], div[id*=c], ..., div[id*=q], div[id*=r] {}
div[id*=t], div[id*=u], div[id*=v], div[id*=w], div[id*=x], div[id*=y], div[id*=z] {}
div[id*='_'], div[id*='-'], div[id*='%'], div[id*='#'] {}
/* s can not be embedded */
div[id*=0s], div[id*=1s], div[id*=2s], ..., div[id*=9s] {}
/* s will be followed by a string of numerals - maybe a funny char or two */
div[id^=s0], div[id^=s1], div[id^=s2], ... div[id^=s9] { ... }
</style>
I need to select all span tag elements within a div with an id list_{[0-9]}+ having the following form:
<div id="list_1234" ...>
<!-- can be nested multiple levels deep -->
...
<span class="list_span">Hello</span>
</div>
How can I do that, e.g. without using jQuery? Is that possible?
If you're happy with css3 selectors you could do something like
div[id^="list_"]
But this will also target divs with ids like list_foo.
You can do this with pure CSS pretty easily, just give those divs a class like this:
<div id="list_1234" class="container" ...>
And CSS like this:
.container span { /* styles */ }
Why you do'nt use a common class ? You can add many class
class="list_1234 mydiv"
And your selector :
.mydiv span
The only thing you can do is:
list_1 span, list_2 span, list_3 span... { ... }
Is it possible to add a "class" attribute to these divs? That's the proper way to handle multiple elements with ids.