# How can I target the first item in a view?

I have a views page that shows all the latest articles that were posted. I want to show case the latest article in a different div on it's own, and then have my loop with all the other articles.

This is my code for the loop, which is in the node--view.html.twig file -

    <div{{ attributes.addClass('col-4')}}>
<div class="news-card">
<img src="{{ file_url(node.field_image.entity.fileuri) }}">
<h3>{{ node.label }}</h3>
{% set text = content.body|render|striptags %}
<p>{{ text|length > 100 ? text|slice(0, 120) ~ '...' : text }}</p>
<a href="{{ url }}" class="btn black-btn">Read More</a>
</div>
</div>


and in my views-view-unformatted.html.twig file I have -

<h2>{{ view.getTitle() }}</h2>
{% if title %}
<h3>{{ title }}</h3>
{% endif %}
<div class="row news-row">
{% for row in rows %}
{%
set row_classes = [
default_row_class,
]
%}
{{- row.content -}}
{% endfor %}
</div>


You could also do

views-view-unformatted.html.twig

Note: add the view name if you want to target a specific view, views-view-unformatted--view-name.html.twig

{% if title %}
<h3>{{ title }}</h3>
{% endif %}
{% set count = 1 %}
{% for row in rows %}
{%
set row_classes = [
default_row_class ? 'views-row',
]
%}
{% if count == 1 %}
{%  set row_classes = row_classes|merge(['first-row']) %}
{%  endif %}
{{- row.content -}}
</div>
{% set count = count + 1 %}
{% endfor %}


and then in css

.first-row { ... }


OR alternatively follow How can I get numbered classes on rows?

and

.views-row-1 { ... }

• This should be the accepted answer. When someone's new here, i always assume Drupal newcomers as well (even when this could be totally wrong). So i try to give answers that are possible without touching any code... ;) – Volker Dec 23 '20 at 12:56
• +1 for being a good sport @Volker – No Sssweat Dec 23 '20 at 12:57

One possible solution ist to create two views. One for your featured content (only 1 item or as much you want to feature) and the second one for the rest with an offset. You can set the offset under pager options (items to skip).

• Can I display both views on one page? – jfc Dec 22 '20 at 21:38
• Yes, just output them as blocks. Alternatively you can use an 'attachment' as display and attach it before or after a page display. – Volker Dec 22 '20 at 21:42
• Do you know if I can edit the attachment on a different twig file? Before the attachment the debugger suggets - node--view--news--attachment-1.html.twig Right now my file is node--view.html.twig, and it's still loading that even if I create a node--view--news--attachment-1.html.twig file. Do you know if I can have 2 files? 1 for the attachment, 1 for my other content? – jfc Dec 22 '20 at 22:53
• @jfc You can definitely have separate twig files for each view display. If it's not being picked up, double-check the file name, clear the cache, and so on. The pattern is usually views-view--VIEW_MACHINE_NAME--DISPLAY_MACHINE_NAME.html.twig. – Patrick Kenny Dec 23 '20 at 1:35
• While this answer works, not the best, you're making things more complicated than it needs to be by having to manage two views. – No Sssweat Dec 23 '20 at 12:30