How to Target Child Tags in CSS

  CSS is a wonderful tool that can be used to style and format webpages. CSS has replaced a ton of old HTML4 tools (i.e. the align attribute). You can use HTML tag name, attribute, ID, and class selectors to target HTML tags. On top of that, you can also use multiple selectors at once to narrow down which HTML tags are affected by certain CSS rules. You can further narrow down which HTML tags are affected by certain CSS rules by specifically targeting tags inside other tags; also known as child tags.

  Doing this can be tricky at times, and at other times it is quite simple. To target a child tag do the following: put the parent tag first then the child tag second (i.e. ul li {width: 20px;}). Doing this specifies that only li tags that are inside ul tags should be affected by the following rules. You can make this CSS rule more specific by listing class and or id selectors right after specifying the parent tag (i.e. ul #test li {width: 20px;}). Doing this specifies that only li tags inside of ul tags with the id of "test" should be affected by the following CSS rules.

  It should also be noted that we can target child tags inside of other child tags (i.e ul #test li a {width: 20px;}). Doing this specifies that only "a" tags inside of li tags inside of ul tags that have an id of "test" should be affected by the following CSS rules. We can target any child tag like this, no matter how many child tags it is in.