equi equi - 4 months ago 5
HTML Question

How to center in CSS only after specific HTML element?

I'd like to move to new line and center only

a
in last
li
. Everything I tried was changing also previous anchors. I can't touch markup, only CSS. Anyone good in CSS know how to target only that last
a
?

The code is:



ol{
list-style:none;
font-family:sans-serif;
}
ol li{
padding:5px;
margin:1px;
background:#e6e6fa;
}
.classX{
text-align:center;
}
.classX a{
display: inline-block;
padding:.3em .5em;
margin:0 auto;
color:#000;
background:#fff;
border:1px solid #000;
}
time,
time + p{
display:inline-block;
font-size:.8em;
}
span + a{
display: inline-block;
padding:.3em .5em;
color:#000;
background:#fff;
border:1px solid #000;
}

<section>
<ol>
<li><!-- This link contain 'a' in first 'p' -->
<h3>Heading</h3>
<img src="http://placehold.it/350x150" />
<p>Primary description with
<a href="finally-styled.html">link</a>
inside</p>
</li>
<li class="classX"><!-- The most imptnt here is to center 'a' -->
<h3>Heading</h3>
<img src="http://placehold.it/350x150" />
<p>Some related content, is centered.</p>
<a href="one.html">One</a>
<a href="second.html">Two</a>
</li>
<li><!-- The most imptnt here is to center 'a' -->
<h3>Heading</h3>
<img src="http://placehold.it/350x150" />
<p>Primary description.</p>
<time>2038-01-19</time>
<p>Category</p>
<span><!-- Invisible element, yeah I know. But might help to target the 'a'. --></span>
<a href="this-1-should-be-centered.html">Link</a>
</li>
</ol>
</section>




Answer

Ok, answer was simple, all I had to do was to add one pseudo-class.

ol{
  list-style:none;
  font-family:sans-serif;
}
ol li{
  padding:5px;
  margin:1px;
  background:#e6e6fa;
}
.classX{
  text-align:center;
}
.classX a{
  display: inline-block;
  padding:.3em .5em;
  margin:0 auto;
  color:#000;
  background:#fff;
  border:1px solid #000;
}
time,
time + p{
    display:inline-block;
    font-size:.8em;
}
span + a{
  display: inline-block;
  padding:.3em .5em;
  color:#000;
  background:#fff;
  border:1px solid #000;
}
ol li:nth-last-of-type(1) a{
	display:block;
	max-width:3em;
	margin:0 auto;
	text-align:center;
}
<section>
  <ol>
    <li><!-- This link contain 'a' in first 'p' -->
      <h3>Heading</h3>
      <img src="http://placehold.it/350x150" />
      <p>Primary description with
        <a href="finally-styled.html">link</a>
        inside</p>
    </li>
    <li class="classX"><!-- The most imptnt here is to center 'a' -->
      <h3>Heading</h3>
      <img src="http://placehold.it/350x150" />
      <p>Some related content, is centered.</p>
      <a href="one.html">One</a>
      <a href="second.html">Two</a>
    </li>
    <li><!-- The most imptnt here is to center 'a' -->
      <h3>Heading</h3>
      <img src="http://placehold.it/350x150" />
      <p>Primary description.</p>
      <time>2038-01-19</time>
      <p>Category</p>
      <span><!-- Invisible element, yeah I know. But might help to target the 'a'. --></span>
      <a href="this-1-should-be-centered.html">Link</a>
    </li>
  </ol>
</section>