P.Classname or .Classname P, Any Difference

p.classname or .classname p, any difference?

So when you do

p.classname{
  ... 
}

You are looking for a <p> with class classname

when you do

.classname p

You are looking for a p that is a descendant of the classes classname.

In CSS . is used as a selector for a class name.

difference between element.classname and element .classname selectors in CSS?

div.funny Selects all divs that have the class funny

While

div .funny Selects all elements with the class funny that are descendants of a div.

The space makes a significant difference

Simples Differences CSS

a.highlight

This will select anchor with class highlight

when:

.highlight a

will select anchor which is descendant of an element with class highlight

Difference between element.value{} and .value{} where value is a class name in CSS

.classname takes all elements with this class.

<style>
    .classname {color: red;}
</style>

<p class=classname>This will be red</p>
<span class=classname>This will be red</span>
<p>This will be black</p>

https://jsfiddle.net/cgsj4znn/

p.classname takes just paragraphs with this class.

<style>
    p.classname {color: red;}
</style>

<p class=classname>This will be red</p>
<span class=classname>This will be black</span>
<p>This will be black</p>

https://jsfiddle.net/cgsj4znn/1/

Difference between $(document).on('click') and $('p[class=classname]').on('click')

This answer focus' on the difference between the two uses of .on() described in the question. Not the difference between the selectors.

The difference between the two is that the first example

$(document).on('click','p',function(){
   //
});

Makes use of event bubbling (or event delegation). This is particularly useful when you have applications that heavily manipulate the DOM that remove and add lots of elements. (Angular or Backbone applications for example that use their respective routers to switch views).

Event bubbling allows you to bind to a lower level, static element but have the event target a nested element that can be removed and added as many times as you wish and maintain the event binding.

Your second example

$('p[class="classname"]').on('click',function(){
   //
});

Binds an event directly to the element. If this element never changes this is fine. If it is removed at any point this binding is lost and would need to be redeclared once it has been re-added to the DOM. This can be a tedious process to say the least. As a result I always use your first option even on 'undynamic' elements just in case I change my mind.

CSS :: Difference between .className and div.className

The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:

<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>

The second class means that only div with class box has that attribute

Only this elements get second class:

<div class="box">test</div>

The selector before the class specify which type of elements can take this class

Setting the className to a specific piece of state in mapped elements

You can define your className in array config as a simple key string and resolve it from state.

const array = [
     {
       label: "Notifications",
       className: "notificationsClassName",
     },
 ];

generateTabs(array) {
    return Object.keys(array).map((key) => {
        return (
            <p className={this.state[array[key].className]}>
                {array[key].label}
            </p>
        );
    });
}

Suggestion : Your config i.e array seems to be an array but you are trying to loop them as Object.keys which is not required. You can simply use array.map

Edit: Using it with map:

generateTabs(array) {
    return array.map((obj) => {
        return (
            <p className={this.state[obj.className]}>
                {obj.label}
            </p>
        );
    });
}

---

Related Topics