0

So I have some html code like this :

`<body>

    <header>
        Hallo
    </header>

    <div class="A">
        <div class="B">
            <h1>First</h1>
            
            <div class="C">
                <img src="blabla.png">
                <div class="D">
                    <h2>1</h2>
                    <p>blabla</p>
                </div>
            </div>
            
            <div class="C">
                <img src="blabal.jpg">
                <div class="D">
                    <h2>2</h2>
                    <p>blabal</p>
                </div>
            </div>

        <div class="B">
            <h1>Second</h1>
            
            <div class="C">
                <img src="Blabla">
                <div class="D">
                    <h2>3</h2>
                    <p>blabla</p>
                </div>
            </div>

            <div class="C">
                <img src="blablaa.png">
                <div class="D">
                    <h2>4</h2>
                    <p>blabla</p>
                </div>
            </div>      
            
        </div>
    </div>
</body>`

how I can get the element of <h2>1</h2> and color it? I cann find a way to take just one element, because all functions refers to "every" and "all". does anyonecan show me a way how to do it ? thanks

Machavity
  • 30,841
  • 27
  • 92
  • 100
jeryoz dimitar
  • 13
  • 10

3 Answers3

2

:first-child maybe

.A > .B:first-child > h1:first-child  + .C h2 {
  color: red;
}
<header>
  Hallo
</header>

<div class="A">
  <div class="B">
    <h1>First</h1>

    <div class="C">
      <img src="blabla.png">
      <div class="D">
        <h2>1</h2>
        <p>blabla</p>
      </div>
    </div>

    <div class="C">
      <img src="blabal.jpg">
      <div class="D">
        <h2>2</h2>
        <p>blabal</p>
      </div>
    </div>

    <div class="B">
      <h1>Second</h1>

      <div class="C">
        <img src="Blabla">
        <div class="D">
          <h2>3</h2>
          <p>blabla</p>
        </div>
      </div>

      <div class="C">
        <img src="blablaa.png">
        <div class="D">
          <h2>4</h2>
          <p>blabla</p>
        </div>
      </div>

    </div>
  </div>
  </header>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

EDIT:

Than you can do like this:

<script>
    var l = document.querySelectorAll('h2');
    l[0].style.color="red";
    l[1].style.color="green";
</script>

EDIT 2:

We can divide CSS selectors into categories:

  1. Simple selectors (select elements based on name, id, class)
  2. Combinator selectors (select elements based on a specific relationship between them)
  3. Pseudo-class selectors (select elements based on a certain state)
  4. Pseudo-elements selectors (select and style a part of an element)
  5. Attribute selectors (select elements based on an attribute or attribute value)

finally realized with only selectors makes it impossible to navigate through hierarchically unrelated HTML elements.

if possible to include script file than go with it.

related question and answers

SidPro
  • 428
  • 1
  • 5
  • 16
0

There are some answers here that rely on JS/JQuery.

However (to avoid JS) you can also just add a class attribute to the element like this:

<h2 class="element-to-color">1</h2>

and select it in CSS like this:

.element-to-color {
  color: blue;  /* or some other color */
}
costaparas
  • 5,047
  • 11
  • 16
  • 26
  • unfortunately, I can't do that. I can't change anything in Html file – jeryoz dimitar Dec 20 '20 at 03:53
  • Well the HTML will have to change in *some* way. Could you clarify what the restrictions are? You'll either have to attach CSS or JS -- and both would modify the HTML.. – costaparas Dec 20 '20 at 03:54
  • the restrictions are I can't change the html file and I only got an empty CSS file. thats it. and the task is to color `

    1

    `.     – jeryoz dimitar Dec 20 '20 at 04:00