# Targeting pseudo element by refering to id of a parent

**URL:** <https://forum.robotframework.org/t/targeting-pseudo-element-by-refering-to-id-of-a-parent/7527>\
**Category:** Robot Framework\
**Created:** [8 July 2024 13:29 UTC](https://forum.robotframework.org/t/targeting-pseudo-element-by-refering-to-id-of-a-parent/7527 "2024-07-08T13:29:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![SAproX1](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/saprox1/32/3785_2.png) [@SAproX1](https://forum.robotframework.org/u/SAproX1)\
**Post date:** [8 July 2024 13:29 UTC](https://forum.robotframework.org/t/targeting-pseudo-element-by-refering-to-id-of-a-parent/7527/1 "2024-07-08T13:29:08Z")

</div>

Hello,

In my case I want to do checks in a class but as there are so many, i want to target the element by the parent’s id.

What works but select only the first one found:

> ```
> ${Main_Border_Color_RGB} Execute Javascript return window.getComputedStyle(document.querySelector('label.custom-control-label'),':before').getPropertyValue('border-color');
> 
> ```

But I want something that let me select the exact element, by parent’s id in this case  
 ![Capture d'écran 2024-07-08 153535](https://europe1.discourse-cdn.com/flex005/uploads/robotframework1/original/2X/6/6782e692baf2844cbe1045f719ad13b8db901492.png)

I tried something like:

> ```
> > Execute Javascript return window.getComputedStyle(document.getElementById(" __BVID__ 52").querySelector('label.custom-control-label'),
> ... ':before').getPropertyValue('background-color');
> 
> ```

But didn’t work.

BR,

---

<div class="post-metadata">

**Author:** ![damies13](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/damies13/32/623_2.png) [@damies13](https://forum.robotframework.org/u/damies13)\
**Post date:** [8 July 2024 13:37 UTC](https://forum.robotframework.org/t/targeting-pseudo-element-by-refering-to-id-of-a-parent/7527/2 "2024-07-08T13:37:17Z")

</div>

HI BR,

> [@SAproX1](#):
>
> querySelector(‘label.custom-control-label’),

Looks like you’re using the css selector, here’s a handy reference guide

> **[W3Schools.com](https://www.w3schools.com/cssref/css_selectors.php)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

I think what you’re after is one of these:

| [_element_ _element_](https://www.w3schools.com/cssref/sel_element_element.php) | div p | Selects all 

elements inside

 elements
 |
| --- | --- | --- |
| [_element_\>_element_](https://www.w3schools.com/cssref/sel_element_gt.php) | div \> p | Selects all 

elements where the parent is a

 element
 |

Combined with:

| #id | #firstname | Selects the element with id=firstname |
| --- | --- | --- |

Hope that helps,

Dave.

---

<div class="post-metadata">

**Author:** ![SAproX1](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/saprox1/32/3785_2.png) [@SAproX1](https://forum.robotframework.org/u/SAproX1)\
**Post date:** [8 July 2024 14:04 UTC](https://forum.robotframework.org/t/targeting-pseudo-element-by-refering-to-id-of-a-parent/7527/3 "2024-07-08T14:04:03Z")

</div>

Hi Dave,

Thanks, I tried this

```
> Execute Javascript return window.getComputedStyle(document.querySelector('# __BVID__ 52 > .custom-control-label'),':before').getPropertyValue('background-color');

```

But got the error: Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’.

---

<div class="post-metadata">

**Author:** ![damies13](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/damies13/32/623_2.png) [@damies13](https://forum.robotframework.org/u/damies13)\
**Post date:** [8 July 2024 14:14 UTC](https://forum.robotframework.org/t/targeting-pseudo-element-by-refering-to-id-of-a-parent/7527/4 "2024-07-08T14:14:37Z")

</div>

Hi BR,

I see you updated the original message with this screenshot:

> [@SAproX1](#):
>
> ![Capture d'écran 2024-07-08 153535](https://europe1.discourse-cdn.com/flex005/uploads/robotframework1/original/2X/6/6782e692baf2844cbe1045f719ad13b8db901492.png)

Something to note, the `<input>` and the `<label>` are both at the same level under the `<div class"custom-control customc-checkbox">`

So the selector `'# __BVID__ 52 > .custom-control-label'` won’t find anything, there isn’t any sub element inside that `<input>`

if you’re trying to select the `<label>`, your best bet would be to use the `for` attribute, something like this: `label[for=" __BVID__ 52"]`

Dave.

---

<div class="post-metadata">

**Author:** ![SAproX1](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/saprox1/32/3785_2.png) [@SAproX1](https://forum.robotframework.org/u/SAproX1)\
**Post date:** [8 July 2024 14:32 UTC](https://forum.robotframework.org/t/targeting-pseudo-element-by-refering-to-id-of-a-parent/7527/5 "2024-07-08T14:32:05Z")

</div>

Thank you very much Dave! \<3

---

<div class="post-metadata">

**Author:** ![CharlieScene](https://dub1.discourse-cdn.com/flex005/user_avatar/forum.robotframework.org/charliescene/32/3484_2.png) [@CharlieScene](https://forum.robotframework.org/u/CharlieScene)\
**Post date:** [8 July 2024 16:37 UTC](https://forum.robotframework.org/t/targeting-pseudo-element-by-refering-to-id-of-a-parent/7527/6 "2024-07-08T16:37:29Z")

</div>

Hi,

Note also that you can use Axes that are useful to target elements in the DOM.  
See here:

> **[W3Schools.com](https://www.w3schools.com/xml/xpath_axes.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

In the first JS provided for attribute, I usually only use one xpath (for example the input one), then use it as a base and navigate with axes to get other infos.  
For example xpath/… to get parent element, that would for example be a colored bordered or else.  
This minimizes the variables, paths and maintenance.

Regards  
Charlie