# CSS - div's children **URL:** \ **Category:** General\ **Created:** [March 29, 2017, 5:59pm UTC](https://forum.freecodecamp.org/t/css-divs-children/101211 "2017-03-29T17:59:47Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![dor272](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dor272/32/163032_2.png) [@dor272](https://forum.freecodecamp.org/u/dor272)\ **Post date:** [March 29, 2017, 5:59pm UTC](https://forum.freecodecamp.org/t/css-divs-children/101211/1 "2017-03-29T17:59:47Z")
Hi, I have a `
` that has a few `
`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. ---
**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\ **Post date:** [March 29, 2017, 6:16pm UTC](https://forum.freecodecamp.org/t/css-divs-children/101211/2 "2017-03-29T18:16:43Z")
> [@dor272](#): > > I have a \ that has a few \s under it and i’m trying to apply a certain style on all the inner divs (just direct children ). > **[Child combinator - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator)** > > The child combinator (\>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. > [@dor272](#): > > 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. You will have to add the Bootstrap files manually. If you did do that, it might be the Bootstrap version. ---
**Author:** ![doug20000](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/doug20000/32/41299_2.png) [@doug20000](https://forum.freecodecamp.org/u/doug20000)\ **Post date:** [March 30, 2017, 3:07am UTC](https://forum.freecodecamp.org/t/css-divs-children/101211/3 "2017-03-30T03:07:26Z")
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 ` section and it works well for me. `` 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` ---
**Author:** ![dor272](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dor272/32/163032_2.png) [@dor272](https://forum.freecodecamp.org/u/dor272)\ **Post date:** [March 30, 2017, 12:11pm UTC](https://forum.freecodecamp.org/t/css-divs-children/101211/4 "2017-03-30T12:11:53Z")
> [@doug20000](#): > > \ 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. ---
**Author:** ![honmanyau](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/honmanyau/32/45787_2.png) [@honmanyau](https://forum.freecodecamp.org/u/honmanyau)\ **Post date:** [March 30, 2017, 12:37pm UTC](https://forum.freecodecamp.org/t/css-divs-children/101211/5 "2017-03-30T12:37:06Z")
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](http://fontawesome.io/get-started/)), too: ``` ``` 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! 🙂 ---
**Author:** ![U-ways](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/u-ways/32/109510_2.png) [@U-ways](https://forum.freecodecamp.org/u/U-ways)\ **Post date:** [March 30, 2017, 12:54pm UTC](https://forum.freecodecamp.org/t/css-divs-children/101211/6 "2017-03-30T12:54:44Z")
> I have a `
` that has a few `
`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](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) do. > what am I doing wrong? What you’re trying to achieve can be done using the [\> combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors) which will match **direct** children of the element. ####For example: ```css /* 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. ---
**Author:** ![dor272](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dor272/32/163032_2.png) [@dor272](https://forum.freecodecamp.org/u/dor272)\ **Post date:** [March 30, 2017, 1:31pm UTC](https://forum.freecodecamp.org/t/css-divs-children/101211/7 "2017-03-30T13:31:14Z")
> [@honmanyau](#): > > 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: > > \ > > 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! 🙂 it’s still not working. here’s a link: > **[Portfolio](https://codepen.io/dor272/pen/ZeMLMG)** > > ... ---
**Author:** ![honmanyau](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/honmanyau/32/45787_2.png) [@honmanyau](https://forum.freecodecamp.org/u/honmanyau)\ **Post date:** [March 30, 2017, 2:19pm UTC](https://forum.freecodecamp.org/t/css-divs-children/101211/8 "2017-03-30T14:19:42Z")
\*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. ☹ (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 `