First, here is the URL for the page I am struggling with: http://www.xn--l-guiden-44a.dk/beers/ny/

On the page I have some p-elements with strong text, that I have modified with the following css:

.beer-description strong {
  display: table-cell;
  border-bottom: 1px solid #009444;

.beer-description:after strong {
  content: "";
  display: table-cell;
  width: 50%;

I have done this to make the text bold, green, and underlined.

However, the first two strong elements "Bryggeri" and "Genre", I would like to not be affected by the css rule, so that they only stay bold, black, and inline.

Is this at all possible without changing the HTML, and just by using CSS?

closed as off-topic by Michael, Brad Dalton, Mark Kaplun, Howdy_McGee, Robert hue Aug 1 '15 at 17:59

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.


You can do that with CSS pseudo nth-child classes. Here is an example to make first two strong black.

.beer-description strong:nth-child(1), .beer-description strong:nth-child(2) {
    color: #404040;

You can modify CSS in this as you wish.

Not the answer you're looking for? Browse other questions tagged or ask your own question.