Scribd
Upload
16 views

Basic CSS Selectors

The document outlines various CSS selectors, including basic selectors like universal, type, class, ID, and attribute selectors, as well as combinators such as descendant, child, adjacent sibling, and general sibling selectors. It also covers pseudo-classes like hover, first child, nth child, last child, and only child, along with pseudo-elements like before, after, first line, and first letter. Finally, it mentions grouping selectors to apply the same styles to multiple elements.

Uploaded by

RajasekarSabastian
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

Basic CSS Selectors

The document outlines various CSS selectors, including basic selectors like universal, type, class, ID, and attribute selectors, as well as combinators such as descendant, child, adjacent sibling, and general sibling selectors. It also covers pseudo-classes like hover, first child, nth child, last child, and only child, along with pseudo-elements like before, after, first line, and first letter. Finally, it mentions grouping selectors to apply the same styles to multiple elements.

Uploaded by

RajasekarSabastian
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Basic Selectors

1. Universal Selector (*)


o Selects all elements on a page.

* {
margin: 0;
padding: 0;
}

2. Type Selector
o Selects all elements of a given type.

p {
color: blue;
}

3. Class Selector
o Selects all elements with a specific class.

.classname {
font-size: 16px;
}

4. ID Selector
o Selects a single element with a specific ID.

#uniqueId {
background-color: yellow;
}

5. Attribute Selector
o Selects elements with a specific attribute.

[type="text"] {
border: 1px solid #000;
}

Combinators

1. Descendant Selector
o Selects all elements that are descendants of a specified element.

div p {
color: red;
}

2. Child Selector (>)


o Selects all direct children of a specified element.

ul > li {
list-style: none;
}
3. Adjacent Sibling Selector (+)
o Selects an element that is directly adjacent to another specified element.

h1 + p {
margin-top: 0;
}

4. General Sibling Selector (~)


o Selects all elements that are siblings of a specified element.

h1 ~ p {
color: green;
}

Pseudo-classes

1. Hover
o Selects an element when it is hovered over.

a:hover {
color: red;
}

2. First Child
o Selects the first child of a specified element.

p:first-child {
font-weight: bold;
}

3. Nth Child
o Selects the nth child of a specified element.

li:nth-child(2) {
background-color: gray;
}

4. Last Child
o Selects the last child of a specified element.

div:last-child {
margin-bottom: 0;
}

5. Only Child
o Selects an element that is the only child of its parent.

p:only-child {
text-align: center;
}

Pseudo-elements
1. Before
o Inserts content before an element.

p::before {
content: "Note: ";
font-weight: bold;
}

2. After
o Inserts content after an element.

p::after {
content: " - end";
}

3. First Line
o Applies styles to the first line of a block-level element.

p::first-line {
font-size: 1.2em;
}

4. First Letter
o Applies styles to the first letter of a block-level element.

p::first-letter {
font-size: 2em;
float: left;
}

Grouping Selectors

 Select multiple elements and apply the same styles.

h1, h2, h3 {
margin-bottom: 0.5em;
}

You might also like