CSS * Selector not working

Accord to a W3 school documentation you can target all of one type of element by using an asterisk:

div * {
    background-color: yellow;
}

–> https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_all_div

Now I tried that with my webpage with a hr. On css line 8 and HTML lines 39, 47, etc.

–> https://codepen.io/Mike-was-here123/pen/WadgVa

hr * {
  width: 120px;
  margin: 0 auto;
  border: 1px solid orange;
}

Any idea on why it is not working?

Because you’re selecting all elements inside that element. There’s nothing inside hr :slight_smile:

Same as

ul li {}
ul * {}

I’m selecting all li elements inside ul

1 Like

Thanks, but if i just do

hr {
  width: 120px;
  margin: 0 auto;
  border: 1px solid orange;
}

It does nothing. I thought you used to be able to do this in CSS?

Bootstrap is overwriting your rules.

Remove those lines:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css'>

If you want to use bootstrap, click on the settings icon to the left of your CSS panel title and search for “bootstrap” there.

Those are two different things, jquery and bootstrap. They should not be interfering with each other. Boostarp is loading in fine because if i remove it everything changes.

Their is no difference between codpen importing it and myself importing it. Nowhere in the settings am i importing it, so it is not a interference issue.

Glad you found a way around it. :+1:

Like I’ve said, your bootstrap styles are overriding your stuff, you can find a way around everything or fix your imports. Hope this helps.

But how do i fix my imports without just removing them and using codepen to import. I want to learn how to import it correctly like you would in a real website.

In a real site you’d import your own styles after every other import, I don’t think you can import your own styles in codepen (not sure about that), so you must use codepen import settings.

1 Like

Thank you so much. I just comment it out so i can use it later if i open it locally or something.

I don’t think you can import your own styles in codepen (not sure about that), so you must use codepen import settings.

When using Codepen, your own styles go in the CSS section. External CSS files are referenced in the CSS Pen Settings. Codepen automatically places the CSS styling in the CSS section after any externally linked files. This allows you to overwrite anything imported.

1 Like