CSS * Selector not working

HTML-CSS
1

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?

2

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
3

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?

4

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.

5

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.

6

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

7

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.

17
17531×651 67.4 KB

8

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.

9

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
10

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