Can I do this "targeting"?

HTML & CSS
1

hi

If i have this:

<div class=“wrapper”>
<li>
<ul>
<li>
</ul>
</li>
</div>

And I want to apply css to the first level of <li> and cannot apply different classes to the first and second level of them.

So basically I don’t want anything inside the <ul> to change depending on what style i apply to the first <li>

Would I do something like this:

.wrapper li > ul ??

2

That first <li> has to be inside a <ul> tag, not a <div>. Would you mind starting again and rephrasing the question? It’s a little confusing to me.

3

Okey I will give you the exact code=) (all closing divs not included tho but shouldnt matter=) )


<div class="header-bottom">
				<div class="row">
					<div class="large-offset-2 large-8 columns">
						<ul>
							<li><button>hover me</button>

								<div class="drop-down-main">
									<div class="row">
										<ul class="large-2 columns">
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
										</ul>
										<ul class="large-2 columns">
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
										</ul>
										<ul class="large-2 columns">
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
										</ul>
										<ul class="large-2 columns">
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
										</ul>
										<ul class="large-2 columns">
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
										</ul>
										<ul class="large-2 columns">
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
											<a href="#">link</a>
										</ul>
									</div>
								</div>

The thing is I want to apply this:

	.row,.columns,.large-8 {
		position: static !important;
	}

But only to the first set of classes that is above the <ul>. As you can see I have these classes inside the <ul> aswell but I dont want this css to be applied to them.

4

You could always create a new class and add that class to whichever tags you want it to apply.


.static {
    position:static !important;
}

Sorry, ReGGae, I’m stuttering because you say that you want those classes applied to specific upper level tags only, yet those classes are already applied down the line. How do you plan to prevent them from being applied where they exist?

You are probably on the right track with the first child selector “>”, but I still don’t really understand the picture.

EDIT:

.row is applied to the divs. You could target the second level div only (above the <ul>) like this:
.heaer-bottom > .row {…}

.columns is applied to a div above the <ul> and to more <ul>s, so you could target the div easily enough like this:
div.columns {…}

.large-8 is only applied to the div above the first <ul> so you could target it like this:
.large-8 {…}

Is that what you have in mind?

5

Works wonderful, thanks for the help!