Applying style to an id'd <p> element

Question

Hi all I'm trying to style the large bit of <p> code in this html

<section id="about">
    <div class="container-fluid post-1">
        <div class="row">
            <h1 class="text-center">Welcome to our Dance-O-Thon for 2016!</h1>
            </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <p>Carolyn Glover</p>
                <p id="1">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my  friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
o   Come to raise more funds for ovarian cancer research
o   Come if you have ovarian cancer, or wish to support someone who does
o   Come if you wish to know more about the disease
o   Come to celebrate life!
                </p>

But I can't seem to target just the one with the id="1". I've tried

#about p #1 {
    font-size: 1.3rem;
}

#about p {
    font-size: 1.3rem;
}

#about #1 p {
    font-size: 1.3rem;
}

Answer 1

As mentioned in my comment, CSS identifiers cannot start with a digit.

According to the W3 CSS specification:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit...

Even the syntax is correct but because it is a digit identifier, it doesn't apply.

See code snippet:

p#1 {
  font-size: 1.3rem;
}
p#one {
  font-size: 1.3rem;
}

<div class="container-fluid post-1">
	<div class="row">
		<h1 class="text-center">Welcome to our Dance-O-Thon for 2016</h1>
	</div>
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<p id="1">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my  friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
				I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
				Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
				o   Come to raise more funds for ovarian cancer research
				o   Come if you have ovarian cancer, or wish to support someone who does
				o   Come if you wish to know more about the disease
				o   Come to celebrate life!
			</p>
			<p id="one">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my  friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
				I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
				Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
				o   Come to raise more funds for ovarian cancer research
				o   Come if you have ovarian cancer, or wish to support someone who does
				o   Come if you wish to know more about the disease
				o   Come to celebrate life!
			</p>
		</div>
	</div>
</div>

Answer 2

Remove the spacing between p tag and your id name like this. There can not be any space between the tag name and id/class name if the id/class is defined in the specific tag.

#about p#1 {
  font-size: 1.3rem;
}

Two suggestions from my side -

1. Using integer as id is not convenient. Try at least appending a string with it. Like p1 or para1.
2. As it is an id, it is unique in the whole html document already. You don't need #about p#1, only #1 would have been enough

Answer 3

You may just use this:

#1 {
    font-size: 1.3rem;
}

Answer 4

you can try this one:

#about p#1 {
    font-size: 1.3rem;
}

#about p {
    font-size: 1.3rem;
}

#about #1 p {
    font-size: 1.3rem;
}

DEMO HERE

Answer 5

This is enough:

#1 {
    font-size: 1.3rem;
}

Answer 6

Just

#1 {
    font-size: 1.3rem;
}

Is enough, since if you're doing it correctly there should be only 1 element with the id 1. Or if you need to increase the strength of your style (usually not needed) use

p#1 {
    font-size: 1.3rem;
}