Select child element CSS

Question

I am using the Author Mode in Oxygen Editor and I want to create a general CSS for many XML files. I want to be able to select child of a given element, without having to have previously specified the name of the child (only of the parent element), for example:

<data-collection>
      <data key="transfer-period" id ="1"/> 
      <data key="communication-profile" id="2">
        <wanCommunication></wanCommunication>
      </data>
</data-collection>

Here I would like to select the wanCommuncation child of the data element, without specifying the wanCommunication element.

Does somebody know how this is achieved in CSS?

Many thanks in advance!

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

Yes, you can. And you have a lot of ways to do it. Here are some:

element:first-child (the first child of the element)

element:last-child (the last child of the element)

element::nth-child(n) (the 'n' child of the element)

These are only a few. You can check the complete list of the CSS selectors here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 17 '18 at 09:41

goediaz

622
6
19

1

This is the correct way to do it. Take the nth-child(3) of data-collection – Siebe.V Apr 17 '18 at 09:51
Thanks for your answer, but my problem is still not solved. data-collection > data:first-child selects the data element that is first child in the data-collection element, and not the wanCommunication... – Lju Apr 17 '18 at 09:57
use data:nth-child(3) – Siebe.V Apr 17 '18 at 10:01
@Goediaz You awnser is correct but your comment is kinda wierd. `document.getElementById('2')::first-child` is neither valid `css` or `javascript`. – Red Apr 17 '18 at 10:12
1

You can't select `:pseudo` elements with `javascript` like that. Try this in a fiddle or what ever `console.log(document.getElementById('2')::first-child)`. This is a valid selector `document.getElementById('2')` but adding `::first-child` is not! Its not possible at all the select `:pseudo` elements with `javascript` because they are not part of the `DOM`. – Red Apr 17 '18 at 10:27
1

No problem, but you are still wrong ;) `.('#2')` is not a `css` selector. To select an `#id` which starts with a number you have to escape the number using `#\31`. Then its valid `css`. So `#\32 { color: #000 }` – Red Apr 17 '18 at 10:44

Red · Answer 2 · 2018-04-17T11:21:30.673

Use the :first-child selector.

data-collection data > :first-child

Using the above selector will select every first child in the data element which has a parent element data-collection.

data-collection data > :first-child {
  background-color: #ededed;
}

<data-collection>
      <data key="transfer-period" id ="1"/>
      <data key="communication-profile" id="2">
        <wanCommunication>Hello :)</wanCommunication>
      </data>
</data-collection>

Select child element CSS

2 Answers2