Make the text "figure x" inside paragraph to be bold

Question

I would like to apply bold formatting to figure 1, figure2, ...until figure 111.

I can only change the HTML and CSS and need to do this without using JavaScript or jQuery. Is there any way besides adding <strong> in HTML?

There is ::first letter in CSS, but no ::first word. Can I use ~like %figure in CSS?

<p>Figure 3 All incidences of ...</p>
<div id="imgcontainer" style="height: auto;">
  <p><img src="Images/misc/newsletters/msIssue7_monoAnti4_850x550.png"     style="margin-bottom: 10px;" /></p>
  <p>Figure 4 ...</p>
</div>
<div id="imgcontainer" style="height: auto;">
  <p><img src="Images/misc/newsletters/msIssue7_monoAnti5_350x370.png" style="float: left; width: 450px; margin: 8px 20px 8px 0px;" /></p>
  <p>Figure 5 Sequence information obtained from MS/MS analysis of capillary electrophoresis ...</p>
</div>
   <p><img src="Images/misc/newsletters/msIssue7_monoAnti6_850x350.png" style="width: 850px; height: 200px; margin: 8px 8px 8px 0px;" /></p>
   <p>Figure 6 Separation of ...</p> 

Answer 1

you can put desired property in a class and then add the elements to that class.

Also you are using id="imgcontainer". id's are unique in css (should be at least) when you want to give same properties to more than one element use classes instead of id's

Try putting all the figures in a div with class abc. Now put these bold property in the that class.

here is the property for bold you need to add in your div.

font-weight: bold;

Answer 2

though you want to change the figure1 and so on to be bold using css, as you know css only deals with decoration, while javascript deals with user action, now this can only be achived by javascript to first find out the figure word, and then adding css class to it, css has no build in Attribute to find out automaticaly and change the decoration of html inner element

Answer 3

Given that you have the ability to change the markup and CSS of your page and that you don't want to add extra elements (like <strong> etc), you could try to make use of CSS counters. Counters have very good browser support.

Using Counters, you can auto number the figures, add the text "Figure X" before the content and also style it without doing any additional changes to your markup. The big advantage of this is that you don't have to manually number them and don't even have to worry about any future changes to the order. CSS would automatically take care of it. You can also add any extra styling that you need.

Below is a sample snippet:

body {
  counter-reset: figure; /* Initializes the counter to 0 */
}
p {
  counter-increment: figure; /* Increment the counter everytime p tag is encountered in DOM */
}
p:before {
  content: "Figure " counter(figure)" "; /* Set Figure + Counter value as content */
  font-weight: bold;
  color: red;
}

<p>Lorem Ipsum...</p> <!-- Counter = 1, Before Content = Figure 1 -->
<p>Lorem Ipsum...</p> <!-- Counter = 2, Before Content = Figure 2 -->
<p>Lorem Ipsum...</p> <!-- Counter = 3, Before Content = Figure 3 -->
<p>Lorem Ipsum...</p> <!-- Counter = 4, Before Content = Figure 4 -->
<p>Lorem Ipsum...</p> <!-- Counter = 5, Before Content = Figure 5 -->

If you don't want to number all <p> tags and want to number only specific <p> tags then you can give them an unique class like in the below snippet. (Note: Even though you add an extra class, the bold text is restricted to just the "Figure X" text and doesn't apply to the entire content of that <p>).

body {
  counter-reset: figure;
}
p.count {
  counter-increment: figure;
}
p.count:before {
  content: "Figure " counter(figure)" ";
  font-weight: bold;
  color: red;
}

<p class='count'>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
<p class='count'>Lorem Ipsum...</p>
<p class='count'>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>

---

If like the snippet provided in your question, the "Figure x" text is applicable only for the second paragraph within the div class='imgcontainer', you can still do this without adding any extra class like in the following snippet:

body {
  counter-reset: figure;
}
.imgcontainer > p + p {
  counter-increment: figure;
}
.imgcontainer > p + p:before {
  content: "Figure " counter(figure);
  padding-right: 1ch; /* More padding-right means more space between Figure x and text */
  font-weight: bold;
  color: red;
}

<div class='imgcontainer'>
  <p>
    <img src='http://placehold.it/100/100'>
  </p>
  <p>Some Description</p>
</div>
<div class='imgcontainer'>
  <p>
    <img src='http://placehold.it/100/100'>
  </p>
  <p>Some Description</p>
</div>
<div class='imgcontainer'>
  <p>
    <img src='http://placehold.it/100/100'>
  </p>
  <p>Some Description</p>
</div>
<div class='imgcontainer'>
  <p>
    <img src='http://placehold.it/100/100'>
  </p>
  <p>Some Description</p>
</div>

^{Note: 1ch means width of the "0" character in the element's font. The ch unit has lower browser support and I have used it only for example. You can use px or em or any such unit instead of ch.}