CSS - div's children

1

Hi,
I have a <div> that has a few <div>s under it and i’m trying to apply a certain style on all the inner divs (just direct children ).

when I try to use .name * {} it applys it to all, more than the 1st level children.
I tried to use .name:nth-children(n) but it didn’t work at all…

what am I doing wrong?
maybe codePen is buggy? because when I copy-paste examples from other sites it doesn’t work at codepen… same goes with graphic icons of bootstrap and some floating issues.

thank you.

2

You will have to add the Bootstrap files manually. If you did do that, it might be the Bootstrap version.

3

I’ve had issue using bootstrap in codepen in the past, at least by trying their quick add under the css section. I usually just load a cdn in the stuff for <head> section and it works well for me. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

As for targeting a child in css you can use the > selector.

You could target just the inner divs by div > div This might be a bit hard to read though in the future/for others, so maybe give your parent div a class, then taget .yourClass > div

4

thank you.
the selector works well now.

but I added to link to bootstrap and when I try to copy-pase some icon from the lessons on freecodecamp it doesn’t appear.

5

Hello there!

If it’s from the FCC challenges then my guess is that the icons you are referring to are Font Awesome icons, not Bootstrap Glyphicons.

To use Font Awesome you will need to add the corresponding CSS (source), too:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

For future reference, it would be much easier if you could copy and paste your code or provide a link to your code.

I hope that helps! Good luck! :slight_smile:

6

I have a <div> that has a few <div>s under it and i’m trying to apply a certain style on all the inner divs (just direct children ).

when I try to use .name * {} it applys it to all, more than the 1st level children.

Yes, using the universal selector (*) after a class will apply its rules to all children of .name. That’s what Universal selectors do.

what am I doing wrong?

What you’re trying to achieve can be done using the > combinator which will match direct children of the element.

####For example:

/* Only the divs that are direct children of #parent will the properties be applied to */
#parent > div {
  background-color: #f00;
}

Now the direct div children of #parent, will have the color red,
Best wishes.

7

it’s still not working.
here’s a link:

8

*Scratch head*

Is it the icons that are not working or is it something else that is not working? I don’t actually see any use of Font Awesome classes in your code. :frowning: (If you are using it on CodePen you will need to get the Font Awesome CDN link with the page I provided in the previous post.

There are a few other important issues:

  • Please keep in mind that you are currently using Bootstrap 4.0.0 Alpha—that’s the default version that is added when you quick-add it through settings on CodePen
  • You are not using Bootstrap properly, here are the critical issues that stand out:
  • If I’m not mistaken you should use the <nav> element for navbars, not a <div>. Please consult this page for proper implementation of Bootstrap 4 navbars
  • The container-fluid class is used to wrap the content that you wish to format with the Bootstrap grid system—you have to combine it with the row class as well as col class and its variants to use the grid system. Please refer to this link for how to use the Bootstrap grid system properly

I personally think that Bootstrap is great, it saves me a lot of time and makes creating consistent, responsive layouts very simple. However, you must invest the time into reading about the grid system, at the very least, to use it properly.

Given the current code, my advice is, before doing anything else, use only Bootstrap to try to set up different layouts until you are comfortable with it.

I hope that helps! :slight_smile: