Is there any way to extract attribute values for CSS selection?

Problem

What I'm thinking is along the lines of the content property's attr() value.

An example of the type of code I'm thinking of would be:

.class[attribute=attr(attribute)]:first-of-type .child{
    color: green;
}

I know this can be done in jQuery, but as I am unable to manipulate the page I'm restyling, it would be best to have a CSS approach to this.

Edit: As this may be confusing for what I want, I'll supply some sample HTML for what I want selected.

<div class="class" attribute="mrmcpowned">
    <span class="child">Test1</span>
</div>
<div class="class" attribute="mrmcpowned">
    <span class="child">Test2</span>
</div>
<div class="class" attribute="mrmcpowned">
    <span class="child">Test3</span>
</div>
<div class="class" attribute="mrmcpowned">
    <span class="child">Test4</span>
</div>
<div class="class" attribute="friend">
    <span class="child">Test1</span>
</div>
<div class="class" attribute="friend">
    <span class="child">Test2</span>
</div>
<div class="class" attribute="friend">
    <span class="child">Test2</span>
</div>
<div class="class" attribute="friend">
    <span class="child">Test3</span>
</div>
<div class="class" attribute="otherfriend">
    <span class="child">Test1</span>
</div>
<div class="class" attribute="otherfriend">
    <span class="child">Test2</span>
</div>
<div class="class" attribute="otherfriend">
    <span class="child">Test3</span>
</div>

I'd like every first <div> with the attribute of whatever the value is to be selected without bias towards the value, e.g. first <div> with attributed value mrmcpowned, first <div> with attributed value friend, and first <div> with attributed value of otherfriend.

Problem courtesy of: mrmcpowned

Solution

Short Answer is "No."

You cannot extract the attribute values as you desire in CSS. Your example may have a solution, however, depending on the exact parameters. That is...

You Can Select the First Without Bias, but Not Without Knowledge

I am uncertain if this works for you or not, but it does follow literally what you asked for in your expanded edit to the question. You stated you wanted selection of the first "without bias towards the value." This is 100% achievable, assuming you have knowledge of all the possible values.

That is, the css can be constructed such that whatever value follows whatever differing value, a switch is made (this is without bias), but to get the css to do that, you need to know what all the possible individual values are. Based on your .class[attribute=attr(attribute)]:first-of-type .child pseudo code I have some doubts that this is the case, as that appears to be attempting to read unknown values. However, in case I have misread that, and you do in fact know all the possible values, but not the order they may appear in, then the following solution works:

See Fiddle Example

CSS

.class[attribute]:first-of-type .child,
.class[attribute="mrmcpowned"] + .class:not([attribute="mrmcpowned"]) .child,
.class[attribute="friend"] + .class:not([attribute="friend"]) .child,
.class[attribute="otherfriend"] + .class:not([attribute="otherfriend"]) .child {
    color: red;
}

Notice how the first selector simply selects the first type of item with any [attribute] defined, so it hits the very first of the group without bias to the attribute name. Then all the other selectors are positive/negative pairings using the adjacent sibling combinator. These pairings of each particular attribute value (which is why you need knowledge of all possible values) find the "breaks" when for example friend is :not() followed by another friend.

If you do not have knowledge of all the possible values for the attribute then it is impossible with pure css.

Solution courtesy of: ScottS

Discussion

Am I incorrect in thinking that you just want

.class[attribute="attr(attribute)"]:first-child .child{
    color: green; 
}

first of type is essentially the same as first child.

here's the fiddle

Discussion courtesy of: Ohgodwhy

Yes. Use the attribute selector.

HTML:

<img src="untitled.png" title="getme">

CSS:

[title="getme"] {
    display: block;
}

Here's the Mozilla reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Discussion courtesy of: helloworld

You should be able to put the attribute in brackets, almost like what you have there. Here is an example I pulled off of W3Schools for selecting input tags with the attribute "type" that equal "text"

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}

You can see the W3Schools link here for more info: CSS Attribute Selector

Discussion courtesy of: mkowalski

This recipe can be found in it's original form on Stack Over Flow.