Hello! This is my first post and hopefully it will not seem too “dumb” I am new to html and I am finding it fun but a little frustrating, the problem may be the browser (chrome) however I have done an update and getting the “up to date” message so this only confuses me more as I cannot think of what else it wrong (other then my coding) Although as mentioned I have simply copied it off an existing video that I paused.
~
I found a YouTube video that I liked so I tried to emulate it and to my frustration I am unable to get the child columns to produce color? Whilst I am new to this I am able to at least copy some code to see how I go. However as mentioned for some reason I cannot get the child columns to be separate colors.
I have given the parent div the class of “call-outs-container” and the child paragraphs are titled “call-out” Exactly the same as the code I copied, below is what I done to try and color the separate columns but to no avail? Perhaps someone may be able to guide me with this, many thanks in advance ! I wonder what I am doing wrong?
~
.call-outs-container:nth-child(1) { background-color:#c0dbe2;}
.call-outs-container:nth-child(2) { background-color:#cdf1c3;}
.call-outs-container:nth-child(3) { background-color:#ccb9da;}
We will need to see the HTML and CSS involved. You can create a working HTML page (starts with doctype, ends with close html, and includes complete head and body code. The CSS can be included between style tags in the head of the page) and include it in a post, or include a link to your test site or create a CodePen that demonstrates the issue. Any of the aforementioned should do the trick.
The two most common causes of such problems are incorrect paths and specificity.
Thanks Ronpat, I did put something up HERE Please note the site is just jibberish, strangely I also have the problem of the headings not positioning over the paragraphs? My main aim was to just copy the YouTube video and have a practice template and although I have tried many times I can’t get the columns to show different colors. I would be grateful to find out what is wrong. I also had problems with the media query, seems every time I try to do this something else changes. I fully understand newbies go through this, but I guess baby steps at first is the way it goes
Yes, as @SamA74 points out, you should be using :nth-child on the actual call-out divs. You use :nth-child on an element you actually want to style when it’s a child element. You don’t use it on the container of the elements you want to style.
Thanks heaps , that did the trick and now i have a template to refer to, although now I have to go back and figure out why it is not mobile responsive? Rather than start a new thread I may just come back to this one if I am asking for my help, great start, thanks!
.call-outs-container:nth-child(x) targets an element with class “call-outs-container” and not children of .call-outs-container.
also, if it hasn’t been pointed out yet… remember there is a crucial difference between NTH-CHILD and NTH-OF-TYPE. if the element containing your .call-outs-container(s) has three or more child elements prior to the first occurrence of a .call-outs-container none of the above rules would apply.
