Clever Geek Handbook

Css stye for selected item only

Is it possible to add a style for the selected element, for example:

I have bootstrap.css

and I

<!DOCTYPE>
<html>
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head>
<body>
<div id='a' class ='container'></div>
<div id='b' class ='container'></div>
</body>
</html>

Is it possible to add style to bootstrap.css

just an element #a

with jQuery or something?

+3


source to share


3 answers


You can do this using SASS Inheritance.

Please see below code:

'#a {
     @import url(bootstrap.css);
}'


This will provide you with bootstrap css with the parent "#a" prefix.

thank

+2


source


In fact, you cannot do this. After all, his entire html document. Whatever css you include, it will be applied to all elements of the page.



One solution for #b, you need to override styles if any that apply bootstrap.css

+1


source


you have bootstrap.css and if you want to assign your own style to a specific element.

using ... jQuery

$("#a").css("color","red");
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head>
<body>
<div id='a' class ='container'>color</div>
<div id='b' class ='container'></div>
</body>
</html>
Run codeHide result


if you want to overwrite

$("#a").attr('style', 'text-align: center;color:red;');
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head>
<body>
<div id='a' class ='container'>red</div>
<div id='b' class ='container'></div>
</body>
</html>
Run codeHide result


-1


source






More articles:


All Articles