Solved

CSS3 siblings and first-child

Posted on 2016-08-16
3
58 Views
Last Modified: 2016-08-16
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
Comment
Question by:Refael
3 Comments
 
LVL 22

Accepted Solution

by:
Snarf0001 earned 500 total points
ID: 41757800
You need to access with the "direct child" specifier:

nav > ul > li > a
0
 

Author Closing Comment

by:Refael
ID: 41757878
You are so right :-) I am such a douch!
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41757936
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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to dynamically set the form action using jQuery.

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question