css selectors - CSS rule to apply only if element has BOTH classes

ID : 10186

viewed : 14

Tags : csscss-selectorscss

Top 5 Answer for css selectors - CSS rule to apply only if element has BOTH classes

vote vote

91

div.abc.xyz {     /* rules go here */ } 

... or simply:

.abc.xyz {     /* rules go here */ } 
vote vote

86

Below applies to all tags with the following two classes

.abc.xyz {     width: 200px !important; } 

applies to div tags with the following two classes

div.abc.xyz {     width: 200px !important; } 

If you wanted to modify this using jQuery

$(document).ready(function() {   $("div.abc.xyz").width("200px"); }); 
vote vote

77

If you need a progmatic solution this should work in jQuery:

$(".abc.xyz").css("width", 200); 
vote vote

70

vote vote

53

To get an attribute to show a specific value based on a boolean check, or be omitted entirely if the boolean check failed, I used the following:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

Example usage:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

Would output <div class="itWasTest"> or <div> based on the value of params.type

Top 3 video Explaining css selectors - CSS rule to apply only if element has BOTH classes

Related QUESTION?