Scribd
Upload
33 views26 pages

Lecture 5

CSS combinators explain the relationship between selectors and include the descendant, child, adjacent sibling, and general sibling selectors. There are different CSS attribute selectors that select elements based on attributes and values, including the [attribute], [attribute="value"], [attribute^="value"], [attribute$="value"], and [attribute*="value"] selectors. CSS attribute selectors can be useful for styling forms without using classes or IDs.

Uploaded by

Zakarya Raazi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views26 pages

Lecture 5

CSS combinators explain the relationship between selectors and include the descendant, child, adjacent sibling, and general sibling selectors. There are different CSS attribute selectors that select elements based on attributes and values, including the [attribute], [attribute="value"], [attribute^="value"], [attribute$="value"], and [attribute*="value"] selectors. CSS attribute selectors can be useful for styling forms without using classes or IDs.

Uploaded by

Zakarya Raazi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS Combinators

A combinator is something that explains the relationship between the selectors.


A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.
There are four different combinators in CSS:
•descendant selector (space)
•child selector (>)
•adjacent sibling selector (+)
•general sibling selector (~)
• Descendant Selector
• The descendant selector matches all elements
that are descendants of a specified element.
• The following example selects all <p> elements
inside <div> elements:
• Example
• div p {
background-color: yellow;
}
• Child Selector (>)
• The child selector selects all elements that are
the children of a specified element.
• The following example selects all <p> elements
that are children of a <div> element:
• Example
• div > p {
background-color: yellow;
}
• Adjacent Sibling Selector (+)
• The adjacent sibling selector is used to select an element
that is directly after another specific element.
• Sibling elements must have the same parent element, and
"adjacent" means "immediately following".
• The following example selects the first <p> element that
are placed immediately after <div> elements:
• Example
• div + p {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>


<p>Paragraph 4. After a div.</p>

<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>


<p>Paragraph 8. After a div.</p>

</body>
</html>
General Sibling Selector (~)
The general sibling selector selects all elements
that are siblings of a specified element.
The following example selects all <p> elements
that are siblings of <div> elements:
Example
div ~ p {
background-color: yellow;
}
CSS [attribute] Selector
The [attribute] selector is used to select elements
with a specified attribute.
The following example selects all <a> elements
with a target attribute:
Example
a[target] {
background-color: yellow;
}
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select
elements with a specified attribute and value.
The following example selects all <a> elements
with a target="_blank" attribute:
Example
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] Selector
The [attribute~="value"] selector is used to select elements
with an attribute value containing a specified word.
The following example selects all elements with a title
attribute that contains a space-separated list of words, one
of which is "flower":
Example
[title~="flower"] {
border: 5px solid yellow;
}
CSS [attribute|="value"] Selector
The [attribute|="value"] selector is used to select elements
with the specified attribute starting with the specified value.
The following example selects all elements with a class
attribute value that begins with "top":
Note: The value has to be a whole word, either alone, like
class="top", or followed by a hyphen( - ), like class="top-text"!
Example
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] Selector
The [attribute^="value"] selector is used to select elements
whose attribute value begins with a specified value.
The following example selects all elements with a class
attribute value that begins with "top":
Note: The value does not have to be a whole word!
Example
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] Selector
The [attribute$="value"] selector is used to select elements
whose attribute value ends with a specified value.
The following example selects all elements with a class
attribute value that ends with "test":
Note: The value does not have to be a whole word!
Example
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] Selector
The [attribute*="value"] selector is used to select
elements whose attribute value contains a specified value.
The following example selects all elements with a class
attribute value that contains "te":
Note: The value does not have to be a whole word!
Example
[class*="te"] {
background: yellow;
}
Styling Forms
The attribute selectors can be useful for styling forms without class or ID:
Example
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}

You might also like