Changing the size of a li:nth-child, [one but not the other]

HTML & CSS
1

My question is this code right here: If I wanted to change the size of one of them but not the other, how would I do that? Right now they are both combined

There’s a number, then an image behind it. If I wanted to change the size of one, but not the other, how would I do that?

#window li:nth-child(9) {
color: red;
  top: 50%;
    left: 50%;
    font-size: 1.5em;
    background-image: url( http://via.placeholder.com/150x150);
    background-size: 100% auto; 
    background-repeat: no-repeat;
    background-position: center center;
  

 }


<style>

body {
    background-color: #ffffff;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#window {
  position: relative;
  width: 150px;
  height: 150px;
  padding: 0;
  margin: 1em auto;
  border-radius: 50%;
  background: #0b5e56;
  font-family: "New Times Roman", serif;
   font-size: 20px;
  list-style: none;
border-spacing: 28px;
}




#window::before{
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://i.imgur.com/mWgrIjf.png);
  background-size: cover;
  content: '';
border-radius: 50%;
 }
 


#window::after {
  position:absolute; 
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://i.imgur.com/rHw0nbg.png);
  background-size: cover;
  content: '';
 }

#window li {
  position: absolute;
  transform: translate( -50%, -50%);
  font-weight: bold;
  color: #7afca0;
 }

#window li:nth-child(1) {
  top: 40%;
  left: 30%;
color: #00d2ff;
 }

#window li:nth-child(2) {
  top: 28%;
  left: 41%;
  color: #b2e5e5;
 }

#window li:nth-child(3) {
  top: 28%;
  left: 58%;
  color: #b2e5e5;
 }

#window li:nth-child(4) {
  top: 40%;
  left: 71.5%;
  color: #b2e5e5;
 }

#window li:nth-child(5) {
  top: 57.5%;
  left: 71.5%;
color: #00d2ff;
 }

#window li:nth-child(6) {
  top: 69%;
  left: 58%;
color: #00d2ff;
 }

#window li:nth-child(7) {
  top: 69%;
  left: 41%;
color: #00d2ff;
 }

#window li:nth-child(8) {
  top: 57.5%;
  left: 30%;
color: #00d2ff;
 }

#window li:nth-child(9) {
color: red;
  top: 50%;
    left: 50%;
    font-size: 1.5em;
    background-image: url( http://via.placeholder.com/150x150);
    background-size: 100% auto; 
    background-repeat: no-repeat;
    background-position: center center;
  

 }





</style>

 <ul id="window">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
 </ul>
2

Which one do you want to change?

You’re more likely to get a good response if you explain clearly what you want to do.

3

Either one. Being that they’re both combined, I’m looking to uncombine them if that’s possible.

If they’re uncombined, it wouldn’t matter which one I made larger or smaller.

Because they’re combined whatever code I add to it, it affects both the number and image.

4

No, they’re not.

The size of the “9” can be varied by changing the font size.

The size of the background image depends on the size of the element to which it’s applied, in this case the li. You can give that specific dimensions, if you don’t want it to fit the number exactly.

1 Like
5

What if then, what if I wanted to make one a tiny bit higher than the other one?

Then what?

I would need to uncombine them.

6

Wait, you’re wrong about that, I just checked. Changing the font size changes both the size of the image and number.

See:

7

If you change the font size, then the size of the li also changes to accommodate it.

As I said, if you don’t want the li (and hence the background image) to fit exactly, then set specific dimensions on the li.

1 Like
8

How would I do that?

9

By thinking?

How do you set the size on any element?

If you wanted to increase the size of the background, you could just add a little padding to the li.

1 Like
10

If this is just the image, am I allowed to leave this blank like this?

<li></li>

11

Having empty elements like <li></li> is generally considered bad practice, unless completely unavoidable.

1 Like
12

How would I get it to work like that?

That’s how I have it set here and there’s no image showing.

13

Why would you expect there to be?

You’ve applied the background image to a li with no content. What do you expect it to be a background to?

Have you tried the solutions I suggested?

14

Solution
<li>&nbsp;</li>

Works:

1 Like
15

Off Topic

@asasass: I would genuinely like to know why you bother asking for assistance here, then ignore all advice you are given in preference to a cobbled-together solution of your own, using poor coding practices.

Most members who post here are trying to learn and want to understand best practice. You have made it clear you have no interest in good coding practice, and I’m not sure what your aim is in asking questions, only to ignore the answers.

16

What’s wrong with the way I found?

17

Hi there asasass,

the basic font-size of the “li elements” is 1em.

If you increase the size to 1.5em for “li:nth-child(9)”, then, as
you say, the “background image” size also increases.

If you require the “background image” size to be unaffected
then it’s size has to be reduced proportionately

In this case 100% divided by 1.5 which is 66.666666666666%.

So…

#window li:nth-child(9) {
    color: red;
    top: 50%;
    left: 50%;
    font-size: 1.5em;
    background-image: url( http://via.placeholder.com/150x150);
    background-size: 66.66% auto; 
    background-repeat: no-repeat;
    background-position: center center;
 }

coothead

5 Likes
18

What if I want to make one top: 52%; and keep the other at top: 50%; What would I do in that scenario?

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.