خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

How to re-write repetitive CSS code?

I have some very repetitive CSS code - there may be a few variations but for the sake of this question, let's ignore the inconsequential variations and assume the whole body of code takes on a repetition of one large block followed by a smaller block, with classes and URLs being the only intentional variations. How would you go about re-writing this using wild-cards and whatever other CSS tools at your disposal to minimise the repetition?

Code:
.std_or_youtube-standard .icon-1 {
display: inline-block;
}

.std_or_youtube-youtube .icon-2:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/youtube-play-red.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.std_or_youtube-youtube .icon-2 {
display: inline-block;
}

.content-troubleshooting .icon-3:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/wrench.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-troubleshooting .icon-3{
display: inline-block;
}

.content-spotlight .icon-4:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/front_on_spotlight.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-spotlight .icon-4{
display: inline-block;
}


.content-review .icon-5:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/half-star.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-review .icon-5 {
display: inline-block;
}


.content-walkthrough .icon-6:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/map_path_to_X.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-walkthrough .icon-6{
display: inline-block;
}


.content-first-impression .icon-7:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/insight-modified.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-first-impression .icon-7{
display: inline-block;
}


.content-tips .icon-8:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/bulb_exclamation.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-tips .icon-8{
display: inline-block;
}



.content-series .icon-9:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/series.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-series .icon-9{
display: inline-block;
}



.content-part .icon-10:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/jigsaw_rotated.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-part .icon-10{
display: inline-block;
}


.content-how-to .icon-11:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/manual.svg");
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-how-to .icon-11{
display: inline-block;
}



.content-guide .icon-12:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/life-saver.svg);
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-guide .icon-12{
display: inline-block;
}


.content-news .icon-13:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/reporter-mic.svg);
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-news .icon-13{
display: inline-block;
}



.content-program .icon-14:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/clapperboard.svg);
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-program .icon-14{
display: inline-block;
}


.content-fuy .icon-15:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/comedy_mask.svg);
background-size: 32px 32px;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-fuy .icon-15{
display: inline-block;
}


.content-cosplay .icon-16:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/cosplay.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-cosplay .icon-16{
display: inline-block;
}


.content-fan-art .icon-17:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/palette.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-fan-art .icon-17{
display: inline-block;
}



.content-developers .icon-18:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/developers.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-developers .icon-18{
display: inline-block;
}


.content-off-topic .icon-19:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/off-topic-road-divert.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}

.content-off-topic .icon-19{
display: inline-block;
}


.content-interview .icon-20:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/interview.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-interview .icon-20{
display: inline-block;
}

.content-esports .icon-21:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/trophy_simpler.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-esports .icon-21{
display: inline-block;
}


.content-highlights .icon-22:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/soccer-highlight-modified.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-highlights .icon-22{
display: inline-block;
}

.content-playthrough .icon-23:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/simple_gaming_mouse.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-highlights .icon-23{
display: inline-block;
}

.content-gamer-affairs .icon-24:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/gamers.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-gamer-affairs .icon-24{
display: inline-block;
}


.content-gamer-affairs .icon-24:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/gamers.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-gamer-affairs .icon-24{
display: inline-block;
}



.content-begier .icon-25:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/first_step-2.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-begier .icon-25{
display: inline-block;
}

.content-intermediate .icon-26:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/first_step-intermediate.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-intermediate .icon-26{
display: inline-block;
}

.content-advanced .icon-27:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/first_step-advanced.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-advanced .icon-27{
display: inline-block;
}

.content-introduction .icon-28:before {
float: left;
content: "";
background: url(https://www.ashenglowgaming.com/wp-content/uploads/2017/12/open_book_3-THIN.svg); background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.content-introduction .icon-28{
display: inline-block;
}

Edit: relevant html code appended:

Code:
        <article id="post-3866" class="first-post post-3866 post type-post status-publish format-video has-post-thumbnail category-league-of-legends tag-bans tag-player-behaviour tag-player-conduct tag-sportsmanship tag-toxicity tag-verbal-abuse post_format-post-format-video content-gamer-affairs std_or_youtube-standard h-entry hentry">
        <header class="entry-header">
                               
                <h1 class="entry-title p-name">
                        <div class="title-container" style="overflow: hidden;"><a href="https://www.ashenglowgaming.com/league-legends-pereial-phenomenon-player-toxicity/" title="Permalink to League of Legends and the Pereial Phenomenon of Player Toxicity" rel="bookmark">League of Legends and the Pereial Phenomenon of Player Toxicity</a><br /><div class="css-icon-container"><div class="icon-1 css-icon post-format" rel="tooltip" title="This is a regular blog post."></div><div class="icon-2 css-icon post-format" rel="tooltip" title="This is a YouTube feature."></div><div class="icon-3 css-icon" rel="tooltip" title="This is a troubleshooting article."></div><div class="icon-4 css-icon" rel="tooltip" title="This article is a spotlight. Typically, spotlights are cast on heroes and champions in MOBA games, character classes in RPGs, and races/factions or units in 4X and real-time strategy. The specific attributes of the character or class are considered along with pros and cons."></div><div class="icon-5 css-icon" rel="tooltip" title="Review article."></div><div class="icon-6 css-icon" rel="tooltip" title="Walkthrough. Linear begiing-to-end coverage of a game or a level within a game, with emphasis on completion and objectives."></div><div class="icon-7 css-icon" rel="tooltip" title="First impressions. The presenter gives his or her authentic reaction to a game first encountered."></div><div class="icon-8 css-icon" rel="tooltip" title="Gaming tips."></div><div class="icon-9 css-icon" rel="tooltip" title="This article is part of a series."></div><div class="icon-10 css-icon" rel="tooltip" title="This article is is an incomplete part. Refer to article for links to other parts."></div><div class="icon-11 css-icon" rel="tooltip" title="How-to. The emphasis of this article is to provide a step-by-step go-to reference on how to do something."></div><div class="icon-12 css-icon" rel="tooltip" title="Gaming guide."></div><div class="icon-13 css-icon" rel="tooltip" title="Gaming news."></div><div class="icon-14 css-icon" rel="tooltip" title="The article is part of a formal chael program."></div><div class="icon-15 css-icon" rel="tooltip" title="Fuy material, humour, or comedy."></div><div class="icon-16 css-icon" rel="tooltip" title="A cosplay feature."></div><div class="icon-17 css-icon" rel="tooltip" title="An fan art feature."></div><div class="icon-18 css-icon" rel="tooltip" title="This article features input from the actual gaming developers/publishers. Typically trying to obtain insider insight about the state of upcoming games."></div><div class="icon-19 css-icon" rel="tooltip" title="This article strays from strict content relevance - it indulges in non-gaming affairs."></div><div class="icon-20 css-icon" rel="tooltip" title="This article takes on an interview format."></div><div class="icon-21 css-icon" rel="tooltip" title="This is an article about competitive esports."></div><div class="icon-22 css-icon" rel="tooltip" title="This article features gameplay highlights."></div><div class="icon-23 css-icon" rel="tooltip" title="This article features a playthrough."></div><div class="icon-24 css-icon" rel="tooltip" title="This is an article about gamer affairs."></div><div class="icon-25 css-icon" rel="tooltip" title="This is a begier-level article."></div><div class="icon-26 css-icon" rel="tooltip" title="This is an intermediate-level article."></div><div class="icon-27 css-icon" rel="tooltip" title="This is an advanced-level article."></div><div class="icon-28 css-icon" rel="tooltip" title="This article is an introduction."></div></div></div>
                </h1>

برچسب: نویسنده: آیلین رضوانی تاريخ: چهارشنبه 22 آذر 1396 ساعت: 18:28

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه