SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I do this "targeting"?

    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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    Okey I will give you the exact code=) (all closing divs not included tho but shouldnt matter=) )

    Code HTML4Strict:
    <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:

    Code CSS:
    	.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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You could always create a new class and add that class to whichever tags you want it to apply.
    Code:
    .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. #5
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    You could always create a new class and add that class to whichever tags you want it to apply.
    Code:
    .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?
    Works wonderful, thanks for the help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •