CODEWITHSUNDEEP
htmlcss
Robbie Milejczak
Robbie Milejczak

Reputation: 5770

CSS rule that applies to some children but ignores others

I have this basic setup:

  <ul class='collection'>
    <li class='collection-item'><strong>Name:</strong> Tim</li>
    <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
  </ul>

I want a rule that floats the not bold text to the right. Currently I've tried:

li > :not(strong){
  float: right;}

But it doesn't affect the strong text. If I wrap the not bold text in a <p> element and do

li > p {
  float: right;}

it adds an extra line, which I'd like to avoid. Am I using the :not selector incorrectly? Is there another way to accomplish this? Thanks

Upvotes: 1

Views: 34

Answers (1)

Stickers
Stickers

Reputation: 78676

You can use flexbox, so it can transform plain text into an anonymous flex item.

.collection-item {
  display: flex;
  justify-content: space-between;
}
<ul class='collection'>
  <li class='collection-item'><strong>Name:</strong> Tim</li>
  <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
</ul>

You can also try the text align and float tricks.

.collection-item {
  text-align: right;
}

.collection-item strong {
  float: left;
}
<ul class='collection'>
  <li class='collection-item'><strong>Name:</strong> Tim</li>
  <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
</ul>

Upvotes: 4

Related Questions