CODEWITHSUNDEEP
htmlcss
vkfjs
vkfjs

Reputation: 101

how to apply the style in all class?

I have tried to apply the styles in specified class even it contain some numeric or string values together attribute, but the style doesn't apply, I don't know where I made a mistake, below I have placed my code for your kind reference.

HTML

 <p class="test">Some text contains....</p>
 <p class="test2">Some text contains....</p>
 <p class="test4">Some text contains....</p>
 <p class="testa">Some text contains....</p>
 <p class="test1">Some text contains....</p>

Css:

 p.test*
 {
 color: blue;
 font-size:150%;
 }

Please advise me how to solve this?

Thanks.

Upvotes: 3

Views: 106

Answers (5)

Vikas Kandari
Vikas Kandari

Reputation: 1851

<p>red font color 1</p>
<p>red font color 2</p>
<p>red font color 3</p>
<p>red font color 4</p>
<p>red font color 5</p>
<p>red font color 6</p>

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

Now this will work simple

Upvotes: 1

ashwinik001
ashwinik001

Reputation: 5163

Here are some links which should help you how you can apply the css-attribute-selectors in variety of cases (including the scenario you mentioned in your question)

http://www.sitepoint.com/web-foundations/attribute-selector-css-selector/

http://www.sitepoint.com/web-foundations/css3-attribute-selectors/

Coming down to your case it should be as simple as below:

p[class^="test"]{
 color: blue;
 font-size:150%;
}

Here you are doing nothing but applying the styles to all p elements who satisfy the following rules

  1. have the class attributes
  2. The value for the class attribute begins with pattern "test".

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Try This Way

p[class^="test"]{
 color: blue;
 font-size:150%;
}

Demo Link https://jsfiddle.net/cne9gebf/

Upvotes: 1

Max
Max

Reputation: 701

Use in your css:

p[class^="test"]{
 color: blue;
 font-size:150%;
}

Upvotes: 6

diegorp
diegorp

Reputation: 77

Use the same class in all your p elements

HTML

<p class="test">Some text contains....</p>
<p class="test">Some text contains....</p>
<p class="test">Some text contains....</p>
<p class="test">Some text contains....</p>
<p class="test">Some text contains....</p>

CSS

.test {
    color: blue;
    font-size:150%;
}

Upvotes: 0

Related Questions