Solved

CSS3 siblings and first-child

Posted on 2016-08-16
3
42 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 21

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

758 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now