#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    238
    Rep Power
    64

    CSS wildcards, anyone?


    I know that I can do something like this:
    Code:
    div[class*='string'] {
      /* something */
    }
    Is it possible to have 'string-' followed by a wildcard for a number? For example I'm looking for:
    Code:
    .string-8 { }
    
    and
    
    .string-23 { }
    String and specifically a number...

    Basically, I'm working toward nav bar CSS where I don't know the number of levels.

    Code:
    <nav class="navbar navbar-expand-md navbar-light bg-faded">
    	<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#top_navbar" aria-controls="top_navbar" aria-expanded="false" aria-label="Toggle navigation">
    		<span class="navbar-toggler-icon"></span>
       </button>
      	<div class="collapse navbar-collapse" id="top_navbar">
    		<ul id="menu-top-menu" class="menu main-menu menu-depth-0 menu-even">
    			<li class="main-menu-item  menu-item-even menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="https://abcd.com/crtc/index.php/test/" class="menu-link main-menu-link">test</a>
    				<ul class="sub-menu menu-odd  menu-depth-1">
    					<li class="sub-menu-item  menu-item-odd menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="https://abcd.com/crtc/index.php/test2/" class="menu-link sub-menu-link">test2</a>
    						<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
    							<li class="sub-menu-item sub-sub-menu-item menu-item-even menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="https://abcd.com/crtc/index.php/test3/" class="menu-link sub-menu-link">test3</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li class="main-menu-item  menu-item-even menu-item-depth-0 menu-item menu-item-type-custom menu-item-object-custom"><a href="#" class="menu-link main-menu-link">Resources</a></li>
    			<li class="main-menu-item  menu-item-even menu-item-depth-0 menu-item menu-item-type-custom menu-item-object-custom"><a href="#" class="menu-link main-menu-link">Client Login</a></li>
    			<li class="main-menu-item  menu-item-even menu-item-depth-0 menu-item menu-item-type-custom menu-item-object-custom"><a href="#" class="menu-link main-menu-link">Contact Us</a></li>
    		</ul>
    	</div>
    </nav>
    Last edited by Arty Zifferelli; January 1st, 2018 at 08:54 PM.
  2. #2
  3. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,265
    Rep Power
    4193
    If you mean you're looking to do something like
    Code:
    .string-* {
       color: red;
    }
    Then as far as I know, that's not possible. I don't really see the point in it either, just use a .string class without any number in both your rule and your element's class list, it'd accomplish the same end result.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    238
    Rep Power
    64
    It is possible to write CSS that properly steps the different levels of menu without knowing how many levels there are?
  6. #4
  7. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,797
    Rep Power
    9646
    If you want different rules at each level then you have to write different rules for each level. But I think it's more likely you want specific rules for the first level or two and then the same rules for every level after (eg, expand down at the top and expand right for the rest). And that's certainly doable: a rule for the first level, a rule for the second level, then a rule for any level below the second level.

    Advice: do away with the built-up classnames (menu-depth-X and those sub- prefixes) and use one term for each. The hierarchy is not determined by the class name but by its location relative to others.
    Code:
    #top_navbar > .menu /* first level */ { }
    #top_navbar > .menu > .menu-item > .menu /* second level */ { }
    #top_navbar > .menu .menu .menu /* third+ levels */ { }
    But it would help to know what design you're trying to end up with.

IMN logo majestic logo threadwatch logo seochat tools logo