<article class="articlepromo-entertainment">
<h3>Kardashian-Wests welcome South to the world</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p>
</article><article class="articlepromo-sports">
<h3>New York Knicks win NBA title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p>
</article><article class="articlepromo-business">
<h3>Google Buys EverythingOnTheInternet.com</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p>
</article>Theseareallarticlepromosorteasers.Theysharesomeofthesamevisualcharac-
teristicsandbehavior,alongwithanarticlepromoprefix.Here,too,wecanuse
thehyphenatedattributeselectortomatchtheseclassnames:01-selectors/attribute-hyphenated.html (excerpt)
[class|="articlepromo"] {
border-top: 5px solid #4caf50;
color: #555;
line-height: 1.3;
padding-top: .5em;
}[class|="articlepromo"] h3 {
color: #000;
font-size: 1.2em;
margin:0;
}[class|="articlepromo"] p {
margin: 0 0 1em;
}Followthisupwithspecificbordercolorsforeachsectiontype,andyou’llachieve
somethingalongthelinesofthelayoutyouseeinFigure1.9.16 CSS Master