1 files changed, 96 insertions, 0 deletions
diff --git a/files/vi/web/css/_colon_focus/index.html b/files/vi/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..c13a30c0d9
--- /dev/null
+++ b/files/vi/web/css/_colon_focus/index.html
@@ -0,0 +1,96 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Lớp giả </a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:focus</code></strong> đại diện cho thành phần (như một input form) nhận focus. Nó được kích hoạt khi người dùng kích hoặc tap lên thành phần hoặc chọn nó bằng phím "tab".</p>
+
+<pre class="brush: css no-line-numbers">/* Chọn bấy kỳ thành phần input nào được focus */
+input:focus {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><strong>Chú ý: </strong>Lớp giả này chỉ áp dụng với chính thành phần được focus. Sử dụng {{cssxref(":focus-within")}} nếu bạn muốn chọn thành phần <em>chứa</em> một thành phần được focus.</p>
+</div>
+
+<h2 id="Cú_pháp">Cú pháp</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ví_dụ">Ví dụ</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input class="red-input" value="I'll be red when focused."&gt;&lt;br&gt;
+&lt;input class="blue-input" value="I'll be blue when focused."&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Chi_tiết">Chi tiết</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Chi tiết</th>
+   <th scope="col">Trạng thái</th>
+   <th scope="col">Bình luận</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Defines HTML-specific semantics.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.focus")}}</p>
+</div>
+
+<p> </p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<ul>
+ <li>{{cssxref(":focus-within")}}</li>
+</ul>