CSS :target Selector

❮ Previous CSS Selectors Reference Next ❯

Example

Highlight active HTML anchor:

:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}

Definition and Usage

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element.

The :target selector can be used to style the current active target element.

Version:	CSS3

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
:target	4.0	9.0	3.5	3.2	9.6

CSS Syntax

:target {
css declarations;
}

More Examples

Example

Create a tabbed menu:

.tab div {
display: none;
}

.tab div:target {
display: block;
}

Try it Yourself »

Example

Create a modal (dialog box):

/* The modal's background */
.modal {
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Display the modal when targeted */
.modal:target {
  display: table;
  position: absolute;
}

/* The modal box */
.modal-dialog {
  display: table-cell;
  vertical-align: middle;
}

/* The modal's content */
.modal-dialog .modal-content {
  margin: auto;
  background-color: #f3f3f3;
  position: relative;
  padding: 0;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Try it Yourself »

❮ Previous CSS Selectors Reference Next ❯