multiple css structure options

Question

I've got a CSS structure problem regarding multiple items with the same contents.

What I want is for there to be two divs, one with a class of right and another with a class of left. They both have several links inside of them with no classes attached to them. What I want is to be able to simply do something like this:

<!DOCTYPE html>
<html>
<head>
<style>
div.left or div.right > a {
    background-color: yellow;
}
</style>
</head>
<body>

<div class="right">
  <a href="google.com">test</a>
</div>

<div class="left">
  <a href="google.com">test2</a>
</div>

</body>
</html>

I know that won't work, but I was wondering if there was an alternative method of doing this.

Do you want to accomplish to style both hyperlinks in one css-statement? — Herman Cordes, Aug 27 '14 at 11:52
You might also want to take a look at: http://stackoverflow.com/questions/25285518/how-to-target-a-group-of-long-similar-css-selectors-on-one-line/25286385#25286385 — Hashem Qolami, Aug 27 '14 at 13:26
See this link http://stackoverflow.com/questions/15676961/merge-two-css-class-for-div-element — Pbk1303, Aug 27 '14 at 14:48

score 4 · Accepted Answer · answered Aug 27 '14 at 11:52

4

Use like below.

div.left > a, div.right > a {
background-color: yellow;
}

answered Aug 27 '14 at 11:52

Suresh Ponnukalai

13,820
5
34
54

multiple css structure options

1 Answers1