Can I use one target CSS selector to change two or more elements?

Question

I have for example this:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS - Selector :target</title>

        <style type="text/css">

            #a:target {
                color:blue;
            }

            .ta-center { text-align: center; }
            .wrap { padding: 5% 12%; }

        </style>
    </head>
    <body>

    <div class="wrap">

        <h1 class="ta-center">CSS - Selector :target</h1>

        <a href="#a">Sets texts in color</a> | 
        <a href="#">Reset</a>

        <!-- first text -->
        <p id="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>

        <!-- second text -->
        <p id="b">Numquam quas suscipit ipsam asperiores similique blanditiis est deleniti temporibus earum. Autem, nisi officiis atque! Libero ab error.</p>
    </div>

    <!-- third text -->
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

</body>
</html>

How I can change color to second text (p with id "b"), for example, to red color, using the link?

I want´t to use JS, only CSS properties, and prefer to know if I can to use "target" specifically for this or is imposible and need another way.

Ok, final result must be: when I click the link "Sets texts in color", first p will be blue, second p will be red. As extra, the third p will be green (I´m sorry, the extra part wasn´t originally in the question, but I think that is more interesting if i can handle no sibling elements).

what do you mean by 'second text'. Which element are you referring to? — TylerH, Mar 11 '17 at 00:00
By "I want´t to use JS, only CSS properties" do you mean you "don't want to use JS, only CSS properties"? — Heretic Monkey, Mar 11 '17 at 00:02
@TylerH I do referred to second paragraph. Now, I've added comments. — Orici, Mar 11 '17 at 09:03

Ason · Answer 1 · 2017-03-11T09:26:36.870

when I click the link "Sets texts in color", first p will be blue, second p will be red. As extra, the third p will be green

To make that work you need to move the hash id target to an element that will be able to "see" all the other.

As the hash id was set on the 1:st p, which won't be able to "see" the 3:rd as it is outside the wrap, I created an extra div before the wrap. And if you need more links working like that, you'll need another extra element added in the same way

Now, by using the general sibling selector ~ and the descendant combinator (space), one can now target any element.

#a:target ~ .wrap #p1 {
  color: blue;
}
#a:target ~ .wrap #p2 {
  color: red;
}
#a:target ~ #p3 {
  color: green;
}

.ta-center {
  text-align: center;
}

.wrap {
  padding: 5% 12%;
}

<div id="a"></div>

<div class="wrap">

  <h1 class="ta-center">CSS - Selector :target</h1>

  <a href="#a">Sets text in color</a> |
  <a href="#">Reset</a>

  <p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p id="p2">Numquam quas suscipit ipsam asperiores similique blanditiis est  deleniti temporibus earum. Autem, nisi officiis atque! Libero ab error.</p>

</div>

<p id="p3">Numquam quas suscipit ipsam asperiores similique blanditiis est deleniti temporibus earum. Autem, nisi officiis atque! Libero ab error.</p>

@Orici Updated my answer so it will do how you ask – Ason Mar 11 '17 at 09:28 — Ason, Mar 11 '17 at 09:28

score 1 · Answer 2 · answered Mar 11 '17 at 00:07

How I can change color to second text, for example to blue color, using the link? I want´t to use JS, only CSS properties, and prefer to know if I can to use "target" specifically for this

You mean when the link referring to #a is clicked, you want to change the color of the second paragraph as well, but with a different color?

You can do that using the general sibling selector/combinator, ~, which allows you to target siblings following an element, or the adjacent sibling combinator/selector, +, for an immediate sibling.

#b is a follwing sibling of #a, so to target it when #a is the current target, you can use

#a:target ~ #b { /* or here specifically: #a:target + #b */
  color:red;
}

your answer work fine for siblings. Now, I´ve added a third p, to my HTML and extend my questio to no siblings. — Orici, Mar 11 '17 at 08:51
Well that is simply not possible. You can only select downwards or to the right in the DOM, not upwards or to the left. See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — CBroe, Mar 11 '17 at 09:40

Can I use one target CSS selector to change two or more elements?

2 Answers2