HTML5 creates div I cant edit with CSS

Issue

I have some HTML as follows ( you can assume closing tags )

<ion-content>
    <ion-tab> 

The problem is, when the DOM is created, the HTML5 tag creates a div which I cannot edit using CSS

It becomes as so

<ion-content>
   <div class="foo">
      <ion-tab>

I need to edit the CSS of the div whose class is "foo", however, if i change the CSS of foo, i change the CSS of all the classes using "foo".

How do I specifically apply CSS to that specific div when I dont create it myself?

Solution

With the small amount off details you have given us, all I can do is refer to these CSS Selectors.

There are number off ways to style a specific element. All have been explained in detail in the link I have given you.

Edit: CSS Selectors explained in detail.

There are several ways to change the style of <div class="foo">.

• You could give the div an (extra) #id or class. This makes it able to apply certain styles, just you would do normally, to this specify element.
• Another option would be parent child {} where you could style all the children within parent. Note: you could add '>/+/~' to be more specific of the place of child within parent.
• A third option would be to specify at what place the div is within its parent using :nth-child(n) or nth-of-type(n).

As I said before, there are many ways to style a specific element. Please take a look at the link I provided.

Answered By - Berendschot