How to put 2 class selector in a single paragraph using internal style sheet
Question
These two lines are in one paragraph. The job title is bold and the font is Arial. The colour is #B22222. The company is italic, Arial Narrow and the colour is #00008B.
I don't know how to put 3 class selector in a single paragraph.
<!DOCTYPE html>
<head>
<title>Job Vacancy</title>
</head>
<style type="text/css">
.h1 {
color:#ffffff;
background-color:#20B2AA;
text-align:center;
}
.p{
font-type:arial;
color:#B22222;
weight:bold;
}
p.p{
weight:italic;
font-type:arial narrow;
color:#00008B;
}
pp.p{
color:#000000;
font-type:arial narrow;
}
</style>
<body>
<h1 class="h1">JOBS DATABASE</h1>
<h2><u>Job Listings</h2></u>
<p class="p">PHP Programmer<br/>OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur</p> <!--should I put another class="p.p" in between <br/> and OrangePro?>
</body>
</html>
4 answers
solution1
2 2013-11-25 15:33:08
I usually use a span for this situation.
<p class="p"><span class="job_title">PHP Programmer</span>
<br/>OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur</p>
CSS
span.job_title {
color: orange; //or whatever
}
But since you have a linebreak anyway, you could just split into two paragraphs with different classes.
<p class="job_title">PHP Programmer</p>
<p class="company_name">OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur</p>
CSS:
p.job_title {
font-weight: bold; //etc..
}
p.company_name {
color: #B22222;
}
solution2
0 2013-11-25 15:35:20
use class for each lines
<h1 class="h1">JOBS DATABASE</h1>
<h2><u>Job Listings</h2></u>
<p class="p"><div class="div1">PHP Programmer</div><div class="div2">OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur<div></p> <!--should I put another class="p.p" in between <br/> and OrangePro?>
.p{
font-type:arial;
color:#B22222;
weight:bold;
}
div1{
weight:italic;
font-type:arial narrow;
color:#00008B;
}
div2{
color:#000000;
font-type:arial narrow;
}
solution3
0 2013-11-25 15:35:30
On the assumption the postings are dynamically fed (eg from a DB),one way of doing this is to arrange your items into specific sections of content for each posting, eg:
<div class='posting'>
<h1>PHP Programmer</h1>
<h2>OrangePro Solutions Sdn.Bhd.--</h2>
Job info.....
</div>
You can then just apply targetted CSS to the posting class. Note that this also uses the correct elements for their purposes- two headings contained within a segregated division of content on the page.
Sample FIDDLE
solution4
0 2013-11-25 15:37:24
First at all you need to understand the selectors you're using :
.p ---- Select all elements with class="p"
pp --- Select all p (paragraph elements) with class="p"
pp.p --- Select all "pp" tags with class="p" . This is invalid because there isn't exist any tag like this .
What you need here is the use of span wrapp the job title in a span with different class:
<p class="p">
<span class="title">PHP Programmer</span><br/>
OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur
</p>
And the CSS can look like this :
p.p {
font-style:italic;
color:#00008B;
}
p.p .title{
color:#B22222;
font-weight:bold;
font-style:normal;
}
The demo http://jsfiddle.net/LS8nK/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.