w3resource

HTML CSS Exercise: Target attribute begins with a certain value

Solution:

HTML Code:

<!doctype html><!-- Declares the document type and version of HTML -->
<html><!-- Opening tag for the HTML document -->
<head><!-- Opening tag for the head section which contains metadata -->
<title>HTML CSS Exercise - Target attribute begins with a certain value</title><!-- Title of the HTML document -->
<style> /* Opening tag for CSS styling */
.container[data-name^=w3r]{ /* Styles for elements with class 'container' and attribute 'data-name' starting with 'w3r' */
color:#5ac4ed; /* Sets the text color to a shade of blue */
}
</style><!-- Closing tag for CSS styling -->
</head><!-- Closing tag for the head section -->
<body><!-- Opening tag for the body section which contains the content -->
<div class="container" data-name="w3resource">Web developemnt tutorials.</div><!-- Container div with attribute 'data-name' starting with 'w3r' -->
<div class="container" data-name="w3r">HTML, CSS, JS, PHP...</div><!-- Container div with attribute 'data-name' starting with 'w3r' -->
</body><!-- Closing tag for the body section -->
</html><!-- Closing tag for the HTML document -->

Explanation:

  • The HTML document consists of two <div> elements with the class 'container'.
  • Both <div> elements have an attribute data-name with values "w3resource" and "w3r" respectively.
  • CSS styling is applied within <style> tags.
  • The .container[data-name^=w3r] selector targets elements with class 'container' and attribute 'data-name' that begins with 'w3r'.
  • It sets the text color of these elements to a shade of blue (#5ac4ed).
  • Both <div> elements match the CSS selector as their data-name attribute starts with 'w3r', hence both are styled with the specified color.

Live Demo:

See the Pen target-attribute-begins-wth-a-certain-value-answer by w3resource (@w3resource) on CodePen.


Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.