Select body with an element with a specific id

Question

so i have a html page with a body and the following structure

<body>
    <h1>Hello</h1>
    <div>
        <div>
            // editable area -->

            <div id="b">
                <h1>Bye</h1>
            </div>

            // <--
        </div>
    </div>
</body>

I want to style the <body> but can only access and edit the <div> with id "b" and add a custom css file. Since the css file is used for more than one html files i can't just directly style the <body>.

Is there a possibility to style a <body> with a specific child element (child of a child) with a specific id?

There is currently no way to select the parent of an element in CSS. — Sanjiv, Dec 10 '18 at 11:39

Bhawna Jain · Answer 1 · 2018-12-10T10:49:40.443

2

You could add a specific class or id to a html page of your site(set of html pages), this way, you will only be doing CSS changes for your specific html page then access other elements as in the snippet below:

#Body_id{
  background-color: yellow;
 }
 
 #Body_id div{
 background-color: pink;
 }
 
  #Body_id div div{
 background-color: red;
 }
 
  #Body_id div div #unique{
 background-color: green;
 color:white;
 }
 
 
 #unique{
  background-color: black !important;
 }

<body id="Body_id">
    <h1>Hello</h1>
    <div>
        <div>
            <div id="unique">
                <h1>H1 in level 3</h1>
                 This is a level 3 div 
            </div>
            
            This is a level 2 div 
        </div>
        This is a level 1 div 
    </div>
</body>

edited Dec 10 '18 at 10:49

answered Dec 10 '18 at 10:04

Bhawna Jain

709
10
27

Due to the environment i'm working with i only have two options, add a custom css file and edit the innermost div (here the div with id "b"). I have no access to the rest of the code, so the only possibility to identify the specific body is by using the id in the div mentioned before. – Koder Dec 10 '18 at 10:18
I have edited the code – Bhawna Jain Dec 10 '18 at 10:25
As the same as i told to @J.vee i can't add a Id to another element than the innermost div. There is no "Body_id" and i can't add one. The body has to be identified by containing a div with the id "b", which i dont know how to do. – Koder Dec 10 '18 at 10:32
@Koder, then why not use a unique word as a class/id to that innermost div?..I have edited the snippet – Bhawna Jain Dec 10 '18 at 10:42

J.vee · Answer 2 · 2018-12-10T10:15:59.650

1

You can give the body a ID

Then you can style it like this:

#Body_id{
  background-color: yellow;
 }
#divFirst{
  background-color: red;
}
#divSecond{
  background-color: blue;
}
#b{
  background-color: green;
}

<body id="Body_id">
    <h1>Hello</h1>
    <div id="divFirst">
      <h1>DivFirst</h1>
        <div id="divSecond">
          <h1>DivSecond</h1>
            <div id="b">
                <h1>Bye</h1>
            </div>
        </div>
    </div>
</body>

edited Dec 10 '18 at 10:15

answered Dec 10 '18 at 09:50

J.vee

623
1
7
26

i can only access the div with id "b" and can't manipulate the body due to the environment. – Koder Dec 10 '18 at 09:53
@Koder You wanted to style the body right? You can do that by giving it a unique id – J.vee Dec 10 '18 at 09:54
Yes, i want to style the body. But i can only edit the innermost div so this is the only place where i can add a unique id. I'm looking for something like body:has(div[id="b"]) {..} but can't get it to work. – Koder Dec 10 '18 at 10:08
You mean something like this? see my edit – J.vee Dec 10 '18 at 10:16
I have no acces to the rest of the code. In the environment i'm working with i can write a custom css file and html code which will later be embedded. So i can't add the ids you mentioned. – Koder Dec 10 '18 at 10:24
Why do you not code it yourself? – J.vee Dec 10 '18 at 10:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184998/discussion-between-j-vee-and-koder). – J.vee Dec 10 '18 at 10:26

Select body with an element with a specific id

2 Answers2