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?


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.

| improve this answer | |

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