Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS3 siblings and first-child

Posted on 2016-08-16
3
Medium Priority
?
87 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 23

Accepted Solution

by:
Snarf0001 earned 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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 …
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…
Suggested Courses
Course of the Month11 days, 23 hours left to enroll

564 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