CSS How to Only Make Bold Fonts for First <Ul> Set

css how to only make bold fonts for first ul set

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;
}

How to set bold only to first level list elements?

You can set bold on first level <ol>, and reset it on the second level <ol>s.

.container ol {  font-weight: bold;}.container ol ol {  font-weight: normal;}

<div class="container">  <ol type="I">    <li>      Title 1      <ol>        <li>sub 1</li>        <li>sub 2</li>      </ol>    </li>    <li>      Title 2      <ol>        <li>sub 1</li>        <li>sub 2</li>      </ol>    </li>  </ol></div>

css bold first word

There is no ::first-word pseudo-element in CSS; you'll have to wrap the first word in an extra element and then select that.

How do I apply a bold to first LI elements in nested structure

You need to add a bit more specificity to your selector:

#list > li > a

This targets any a that is a direct descendent of an li that is a direct descendent of #list (which I'm assuming is the outer ul, even though that's not specified in your example).

You can see it in action at http://jsbin.com/segig/1/edit?css,output.

No extra markup or rules necessary, which makes this a pretty clean solution.

Make ABC Ordered List Items Have Bold Style

a bit of a cheat, but it works:

HTML:

<ol type="A" style="font-weight: bold;">
  <li><span>Text</span></li>
  <li><span>More text</span></li>
</ol>

CSS:

li span { font-weight: normal; }

How can I force text to normal (not bold) using css?

Consider using:

label {font-weight: 400 !important}

Also specify the font-size, as your label appears to be displaying a larger than normal font size.

Inline elements shifting when made bold on hover

Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

How can I bold specific HTML rows and columns with CSS or HTML?

To bold the first row and first column with CSS, using your current HTML markup, use the :first-child pseudo-class, which matches any element that is the first child (first sub-element) of its parent:

tr:first-child, td:first-child { font-weight: bold }

However, if those cells are meant to be header cells (for other cells in the same column or same row), it might be more logical to use the th element for them and to wrap the first row in a thead element:

<table border="1">
    <thead>
        <tr>
            <th></th>
            <th>translate.com AND https://translate.google.com/</th>
            <th>http://www.bing.com/translator/</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>I eat tacos</th>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
    <!-- other rows here -->
    </tbody>
</table>

The th elements appear in bold by default (though you can still use CSS to say that explicitly). They will also be centered by default; if you do not want that, you can easily override that with CSS, e.g. th { text-align: left }.

In this case, the first row looks very much like a header row, so I would make it a thead with th. This could be useful e.g. because many browsers then repeat that row at the start of a new page if the page is printed and the table is divided into two or more pages. As for the first cells of each row, they are perhaps best kept as td and just styled bold, if desired.

change of font-weight to bold is unwantingly changing width of element

Other than the width route here are two other possibilities, it's down to personal preference as to whether you think they are suitable or not. Both these ideas work on the same principal, that you use a separate element to show the bold state, and this element either doesn't (idea one) or does (idea two) affect the UI with it's dimensions.

http://jsfiddle.net/3Jyge/2/

Idea one

Use pseudo selectors. This method relies on the browser supporting quite recent advances i.e. :before and content: attr() so probably isn't reliable just yet.

• https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_Compatibility
• https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Browser_compatibility

css:

ul {
  list-style: none;
}
ul li {
  float: left;
}
ul li:hover a {
  visibility: hidden;
}
ul li:hover:before {
  position: absolute;
  font-weight: bold;
  content: attr('data-text');
}

markup:

<ul>
  <li data-text="one"><a href="#">one</a></li>
  <li data-text="two"><a href="#">two</a></li>
  <li data-text="three"><a href="#">three</a></li>
</ul>

Idea two

The other is a bit more straight-forward, although it relies on preping your markup first — and those who use screen readers may understandably dislike your site; unless you can find a nice way to hide the duplicate text from them.

markup:

<ul>
  <li><a href="#">
    <span class="a">one</span>
    <span class="b">one</span>
  </a></li>
  <li><a href="#">
    <span class="a">two</span>
    <span class="b">two</span>
  </a></li>
  <li><a href="#">
    <span class="a">three</span>
    <span class="b">three</span>
  </a></li>
</ul>

css:

ul {
  margin: 0; padding: 0;
  list-style: none;
}
ul li {
  float: left;
}
ul li a span.b {
  visibility: hidden;
  font-weight: bold;
}
ul li a span.a {
  position: absolute;
}
ul li:hover a span.b {
  visibility: visible;
}
ul li:hover a span.a {
  visibility: hidden;
}

At the end of the day the better solutions would be:

1. Set a width, although I can understand not wanting to do this.
2. Use JavaScript to calculate dimensions.
3. Choose a different highlight, one that doesn't alter the dimensions of the text.

---

Related Topics