CODEWITHSUNDEEP
htmlcss
user3755867
user3755867

Reputation: 57

apply same effect on different element

By using the below code , i want to apply same effect of css on h1 and h2 tag.

HTML

<div class="blog_content_snippet">
    <h1 contentEditable="true" data-text="Enter text here h1"></h1>
    <h2 contentEditable="true" data-text="Enter text here h2"></h2>
</div>

CSS

.blog_content_snippet h1,h2:empty:not(:focus):before{
    content:attr(data-text)
 }

http://jsfiddle.net/cmta3bu5/6/

Using one css i want apply on both , anyone have idea ??

Upvotes: 0

Views: 81

Answers (2)

jmore009
jmore009

Reputation: 12923

Declare both of them

.blog_content_snippet h1:empty:not(:focus):before,    
.blog_content_snippet h2:empty:not(:focus):before{
    content:attr(data-text)
}

EXAMPLE 1

Or you could always just create a class and add it to whatever element you want:

HTML

<div class="blog_content_snippet">
   <h1 class="content" contentEditable="true" data-text="Enter text here h1"></h1>
   <h2 class="content" contentEditable="true" data-text="Enter text here h2"></h2>
</div>

CSS

.content:empty:not(:focus):before{
    content:attr(data-text)
}

EXAMPLE 2

Upvotes: 1

Vin.AI
Vin.AI

Reputation: 2437

This may help you:

.blog_content_snippet h1:empty:not(:focus):before,
.blog_content_snippet h2:empty:not(:focus):before {
    content:attr(data-text)
}

Upvotes: 0

Related Questions