CSS attribute selector

HTML-CSS
1

Hello
Please can someone show me how to use this [attr=value] syntax to style an element like a div?
Thank you!

2

Hello there,

Here is a helpful lesson that could help: https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements

If you have not done so, completing the lessons prior might be a good idea.

Hope this helps

3

I have been through that lesson but i want to know how you can use this syntax to style a div or a paragraph or img

4

Right. Well, it is almost the same. Here is the basic syntax:

elementName[attributeName=attributeValue]

Hope that helps

5

I tried this it doesnt work
[type='h2']{font-size: 5px;}

6

Here are a few examples of the above:

  • elementName - h1, div, img, input…
  • attributeName - id, class, name, type…
  • attributeValue - Well, almost anything, except for a few attributes such as type, where the value has to be one of a few specific to certain elements.

Hope this helps

7

if you want to style an h2element you just use

h2 {...}

this syntax [attr='value'] is for selecting an element using its attributes

for example, as there are many types of inputs you can style the different types of inputs using [type="radio"], [type="checkbox"] etc

8

yes but i want you to write a code example of this

9

find an attribute that is used on the element you want to style, and use that

otherwise selecting with element, class or id is easier

1 Like
10

ok i was just trying to understand that concept

11

I did this on my survey form, I find it especially useful for the <input> element

input[type="radio"],
input[type="checkbox"] {
  margin-right: 0.3vw;
}

/Jakob

12

that syntax works if your element has attributes, a div or h2 generally have classes or id, and then it’s best to use class selector or id selector

13

ok thank you i will use h2{} method
you guys are great