Solved

CSS3 siblings and first-child

Posted on 2016-08-16
3
72 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 23

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

635 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