How to set the default position of a scrollable DIV?

Question

I'm using scroll-snap-type to move through DIVs and put them into view. What I want to do is set the view to the 2nd DIV by default, so when the page loads the div with "This should be viewed by default" is seen, and then the user is able to scroll left or right.

How can I do this with just CSS? (no JS)

https://jsfiddle.net/2hcgoL1b/2/

html, body, .holster {
  height: 100%;
}


.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}


/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}


.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}






/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>1</div>
  <div>This should be viewed by default</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 1

You will need javascript, tabindex attribute and an id , CSS won't be of any help here:

disclaimer it will be annoying for your visitors such as was the old trick <div tabindex="0" autofocus="autofocus">

window.onload= document.getElementById("focus").focus();

/* setup */
html, body, .holster {
  height: 100%;
}


.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}


/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}


.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}






/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>1</div>
  <div tabindex="0" id="focus">This should be viewed by default</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

to allow element to get the focus, if it is not a link or a form element, an attribute will be necessary.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

Note: once the element has an id, you should be able to link it : http://site.html#MyId