How to add element to existing css class [closed]

Tags: javascript,jquery,css

Problem :

How to add css element to my existing css class?


.usrgrid {

Is there any way to add attribute to .usergrid?

I had try like $(.usergrid).css("display","block"); but it's not working.


 $(".usergrid .k-button").css({ "display": "block" });
.usergrid .k-button{
<!DOCTYPE html>
   <link rel="stylesheet" href="//" />
    <link rel="stylesheet" href="//" />
  <link rel="stylesheet" href="//" />
     <script src=""></script>
    <script src=""></script>

    <script src=""></script>
    <script src=""></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>


Solution :

The problem here is that you cannot add stuff to the parsed CSS. You can only add inline styles to a particular element. Say, you had a <div class="usrgrid">. The only modification you do it this: <div class="usrgrid" style="color: red">. Examples presented here using .css do exactly this.

Other options are:

  1. Add CSS code dynamically
  2. Link CSS file dynamically


So, I realised now from where the problem comes. You have an element, you want to modify it somehow. For example, it was invisible and then became visible or it had the white background and then became yellow, whatever. The key point here is that you have your initial state and "modifier" for it. If you take the modifier away, you get back to where things began. From CSS point of view it means:

.my-elem {}

.my-elem--big {}

.my-elem--yellow {}

.my-elem--visible {}

Now, in your JS you only need to add a proper set of modifiers (classes) to you element.

<div class="my-elem"></div>

<div class="my-elem my-elem--visible"></div>

There is a naming convention for CSS called BEM. It solved exactly this problem. In a nutshell, you split your UI into blocks, elements and modifiers.

By following this approach you separate concerns (the logic of when the element should become visible, JS, and what does it mean that it is visible, CSS) and make your code more pleasant to work with (ubiquitous structure and predictability).

I personally, always try to avoid any CSS in my JS. Even if it just display: block. Because these two are meant for different things.

    CSS Howto..

    What is the correct css for the list of results to show correctly in this situation? [closed]

    CSS how to height step arrow

    how to unset max-height?

    How do I fix hover property of a div?

    How to reduce the indentation between first and second line inside circle?

    How to remove the double scroll?

    How to change color of the selected item from a Xul listbox?

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How to create dropdown with multiple columns?

    How can I mix vertically-centered elements with different font sizes and retain consistent line height?

    How can I use PHP code in a CSS file

    How to set % height in fluid layout?

    how to get a div to randomly move around a page (using jQuery or CSS)

    How to catch div position and reposition it later (on MAC)

    How to make a sudoku grid using HTML and CSS?

    How to stop text in div pushing other divs down the page?

    how to make menu on mouse hover in CSS

    How to create a modal popup using javascript and CSS

    How do I remove the gap between div tags?

    How to add css in php file? [closed]

    How can I change my code from PHP to HTML?

    how to change css property of 2nd & 6rd DIV using jquery

    How do I add CSS font styles to PHP echos?

    How to draw many diagonal lines[right hash lines] using css, html?

    How to adjust the height of two objects floating next to each other according to the amount of content, using css

    How to make the submenu to be at the same horizontal as its parent's menu with this css?

    How can I make a smooth transition of my input's placeholder text?

    How to Make a Pentagram with CSS Border Attributes

    How to apply styles to an element with a prefixed ID?

    how to configure .htc files to work on nginx