css how to only make bold fonts for first
    set


Tags: css,css3

Problem :

I have 2 or more <UL> sets inside, and wants to only make first UL <a> set to bold. in fact, this is a menu with multiple sub menus, and I only want to make parent links bold.

I know it can be done by adding some more ID's or classes, but this is not an option, and just want to try css method only.

<ul class="menu">
    <li class="collapsed first">
        <a title="Mechanical products" href="1">Mechanical Products</a>
    </li>
  <li class="collapsed">
    <a title="Chemicals" href="2">Chemicals</a>
  </li>
  <li class="expanded active-trail">
    <a title="Instrumentation" href="3">Instrumentation</a>
    <ul class="menu">
        <li class="leaf first">
            <a title="Control valves FISHER" href="4">Control Valves</a>
        </li>
      <li class="expanded active-trail">
        <a class="active" title="Corrosion Monitoring System" href="5">Corrosion Monitoring</a>
        <ul class="menu">
            <li class="leaf first">
                <a title="Access Fitting Assemblies" href="6">Fitting Assemblies</a>
            </li>
          <li class="leaf last">
            <a title="Coupon Holders, Coupons &amp; Probes" href="7">Holders,Coupons</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
    <li class="collapsed">
        <a title="Mechanical products2" href="8">Mechanical Products2</a>
    </li>
</ul>

as of this example, only "Mechanical Products", "Chemicals", "Instrumentation" and "Mechanical Products2" should get bold.



Solution :

Use the first child selector: >

.menu > li {
    font-weight: bold;
}

Not that if you need to support IE6, you'll have to do it manually, as IE6 doesn't support the > selector:

.menu li a {
    font-weight: bold;
}
.menu li ul li a {
    font-weight: normal;
}

    CSS Howto..

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    How to create live event for css

    How to change CSS pseudo-class element using JavaScript

    How does *, *:after, *:before work?

    How would you explain CSS positioning to a human being?

    How to align two images in html/css

    How can I use CSS to create a middle column that fills the height of the page?

    How do I align an absolute position child element in the center of its parent div [duplicate]

    How to reload CSS after ajax call

    How to control the text inside DIV tag by not allowing the text to be increased?

    How do I create triangle shaped vertical breadcrumbs

    How to make the bootstrap button,when clicked to redirect to a specific page

    How to transform Menu icon to Arrow icon? [closed]

    how to make changes permanently to css elements with -moz-transform?

    How to provide an API to alter CSS / styles / white label for an encapsulated angularJS directive ( re usable widget / component )

    How to Fade In Background on Page Load - jQuery

    how to translate this xpath into css selector

    how to define multiple classes' hover event in css?

    How to write this 'OR' CSS selector?

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to catch this nth-child() with css

    CSS - how to align text and an image vertically?

    How to increase rotate value

    how to optimize Less CSS? how to generate 1 minified version of all less files? I am also using modifyVars

    Non-responsive website - Viewport issue - Page showing zoomed in on mobile

    how to add JS and CSS tags from module without using header hook

    How to make CSS NOT do something [duplicate]

    How to vertically center multiline text with an image on its left?

    How can I make all table cell sizes the same width in css?

    how to append an icon to an input search?