CODEWITHSUNDEEP
htmlcsscss-selectors
DJC
DJC

Reputation: 1173

regarding selecting partial attributes CSS3 HTML5

Why when I have 3 separate paragraphs, each with a matching word as PART of their class attribute, do they all get styled the same even if I am not selecting by partial attribute...for example I have 4 paragraphs, 3 with the classes 1)pad, 2)pad bdr, 3)pad bdr mgn, and yet the code below contains no ~ or | for selecting by partial attribute, yet each line of code below styles all 3 paragraphs despite not containing the correct class name?

p.pad {padding: 1em}
p.bdr {border: 0.5em solid red}
p.mgn {margin: 2em}

Upvotes: 0

Views: 67

Answers (1)

Roralee
Roralee

Reputation: 548

The selector documentation speaks to the comment left re: .classes method: http://www.w3.org/TR/CSS2/selector.html#pattern-matching

I tested the CSS provided on a set of P tags and did not get odd results: http://jsfiddle.net/Roralee/Taejc/1/

.pad {padding: 1em}
.bdr {border: 0.5em solid red}
.mgn {margin: 2em}


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat euismod aliquet. Phasellus porttitor gravida viverra. Sed at mauris faucibus, lobortis leo et, rhoncus velit. Duis varius turpis sed sollicitudin eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec mollis sapien a luctus convallis. Integer tincidunt posuere neque, congue congue lacus accumsan sed. Maecenas tempus massa eget vestibulum lacinia.</p>
<p class="pad">Aliquam erat volutpat. Nullam accumsan ipsum ut dui vulputate, eget congue elit mattis. Sed quis elit odio. Quisque blandit accumsan iaculis. Fusce et est id quam ultrices hendrerit. Etiam placerat posuere sem. Phasellus blandit, orci eget adipiscing commodo, erat quam vulputate metus, tristique auctor lectus nunc id nunc.</p>
<p class="pad bdr">Sed id semper nunc. Sed hendrerit augue magna, at aliquam nunc mollis id. Vivamus vitae neque id mi luctus ultricies. Donec id turpis lacus. Curabitur eu tincidunt est. Sed auctor suscipit accumsan. Donec lorem felis, porta at odio malesuada, rutrum congue erat. Morbi dui odio, aliquet eget vehicula at, porta blandit nulla.</p>
<p class="pad bdr mgn">Fusce facilisis urna sit amet malesuada adipiscing. Quisque pulvinar erat nec velit pulvinar varius. Nullam porta turpis ut tellus dignissim, sed pretium enim sollicitudin. Donec tincidunt, erat in volutpat vehicula, arcu nulla pellentesque felis, vitae ultrices mi erat et augue. Sed condimentum tempus tellus, at porta lorem pellentesque gravida. Nullam consectetur augue odio, blandit pellentesque elit varius eget.</p>

If there is relevant HTML surrounding what is already provided it would be helpful.

Upvotes: 1

Related Questions