Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 89
  • Last Modified:

CSS3 siblings and first-child

Hello Experts,

For testing purpose: I am trying to apply a style on the "a" tags that will ONLY apply on the main links and NOT on the sub links (in the inner UL).  I was trying several ways but or it apply to all the "a" tags or it does not apply at all ... e..g....
I would be happy to know what am i doing wrong.

nav ul:first-child li a {
	color:red;
}

nav ul:first-of-type li a {
	color:red;
}

nav + u li a {
	color:red;
}

Open in new window





<nav>

  <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a>

      <ul>
        <li><a href="#">sub link 1</a></li>
        <li><a href="#">sub link 2</a></li>
      </ul>

    </li>
  </ul>

</nav>
     

Open in new window

0
Refael
Asked:
Refael
1 Solution
 
Snarf0001Commented:
You need to access with the "direct child" specifier:

nav > ul > li > a
0
 
RefaelAuthor Commented:
You are so right :-) I am such a douch!
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Let me explain a bit about the sibling, child, descendant, and parent concepts using your HTML code snippet.
<nav>
<!-- This nav element contains multiple descendants 
	but is the parent of only one ul element -->

	<ul id="ul1">
	<!-- This ul is the first and only child of the nav element. 
		It has multiple li, a, and ul descendants -->
		<li id="li1">
		<!-- This li is the first child of the ul (ul1).
			It is also a descendant of the nav element.
			It has two siblings, li2 and li3.
			The a element that follows (a1) is its only descendant -->
			<a id="a1" href="#">link 1</a>
			<!-- This a element is a descendant of li1, ul1, and the nav element. -->
		</li>
		<li id="li2">
		<!-- This li is the second child of the ul (ul1).
			It is also a descendant of the nav element.
			It has two siblings, li1 and li3.
			The a element that follows (a2) is its only descendant -->
			<a id="a2" href="#">link 2</a>
			<!-- This a element is a descendant of li2, ul1, and the nav element. -->
		</li>
		<li id="li3">
		<!-- This li is the third and last child of the ul (ul1).
			It is also a descendant of the nav element.
			It has two siblings, li1 and li2.
			It has multiple a, ul, and li descendants, but it is the parent
			only of an a element (a3) and a ul (ul2) -->
			<a id="a3" href="#">link 3</a>
			<!-- This a element is the first child of the li (li3).
				It is also a descendant of ul1 and the nav element.
				The ul that follows (ul2) is its only sibling.
				It has no descendants. -->
		
			<ul id="ul2">
			<!-- This ul element is the second and last child of the li (li3).
				It is also a descendant of ul1, and the nav element.
				The previous a element (a3) is its only sibling.
				It has multiple li and a descendants. -->
				<li id="li4">
				<!-- This li is the first child of the ul (ul2).
					It is also a descendant of li3, ul1, and the nav element.
					It has one sibling, li5.
					The a element that follows (a1) is its only descendant -->
					<a id="a4" href="#">sub link 1</a>
					<!-- This a element is a descendant of li4, ul2, li3, ul1 and the nav element. -->
				</li>
				<li id="li5">
				<!-- This li is the second and last child of the ul (ul2).
					It is also a descendant of li3, ul1, and the nav element.
					It has one sibling, li4.
					The a element that follows (a1) is its only descendant -->
					<a id="a5" href="#">sub link 2</a>
					<!-- This a element is a descendant of li5, ul2, li3, ul1 and the nav element. -->
				</li>
			</ul>
		
		</li>
	</ul>

</nav>
<div>
<!-- This div is a sibling of, and immediately follows the nav element -->
...
</div>

Open in new window

Now let me explain what elements your CSS would target.
nav ul:first-child li a {
/* targets any a elements which are descendants of an li which is a 
	descendant of a ul which is the first-child of its parent and
	is a descendant of a nav element.
	ul1 is the first-child of the nav element (and is therefore a descendant of the nav element)
	ul2 is the first-child of its parent (li3) and is a descendant of the nav element
	li1, li2, and li3 are all descendants of ul1
	li4 and li5 are both descendants of ul1 and ul2
	targets a1, a2, a3, a4, and a5 which are all descendants of the li elements listed above */
	color:red;
}

nav ul:first-of-type li a {
/* this will target exactly the same elements as the selector above because 
	ul1 is also the first-of-type of its parent which is the nav element and ul2 
	is the first-of-type of its parent and is a descendant of the nav element. */
	color:red;
}

nav + u li a {
/* this will target nothing because the element which immediately follows the nav element
	is a div which contains no descendants */
	color:red;
}

nav > ul > li > a {
/* this will target any a element whose parent is an li whose parent is a ul whose parent is a nav element.
	ul1 is the only ul whose parent is a nav (ul2's parent is an li)
	li1, li2, and li3 all have the same parent which is ul1
	a1, a2, and a3 all have parents li1, li2, and li3 */
	color:red;
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now