How to replace some specific content (of various lines) of a file with the command sed?

Question

I would like to know how to replace this:

.otros{
   position: fixed;
   top: 116px;
   z-index: 100;
   left: 0;
}

by this:

.otros{
   position: fixed;
   top: 70%;
   z-index: 100;
   left: 0;
} 

The content of the file is similar to the following:

.social a:not(:hover){
    width: 70px;
    -webkit-transition: 600ms;
    -o-transition: 600ms;
    -ms-transition: 600ms;
}
.social div a:not(:hover){
    width:200%;
}
.otros{
    position: fixed;
    top: 116px;
    z-index: 100;
    left: 0;
}

This command doesn't work:

sed 's/.otros{\ntop*:*;\n}/.otros{\ntop:70%;\n}/g' estilos.css

The result is:

.social a:not(:hover){
    width: 70px;
    -webkit-transition: 600ms;
    -o-transition: 600ms;
    -ms-transition: 600ms;
}
.social div a:not(:hover){
    width:200%;
}
.otros{
    position: fixed;
    top: 116px;
    z-index: 100;
    left: 0;
}

How to replace specific lines?

Answer 1

Sed replacement operates on individual lines by default; to perform a match in a multiline context you will need to use the N command to read additional lines into the pattern space. Ex.:

$ sed '/\.otros{/ {N;N;s/top: 116px/top: 70%/}' estilos.css 
  .social a:not(:hover){
    width: 70px;
    -webkit-transition: 600ms;
    -o-transition: 600ms;
    -ms-transition: 600ms;
  }
  .social div a:not(:hover){
    width:200%;
  }
  .otros{
    position: fixed;
    top: 70%;
    z-index: 100;
    left: 0;
  }

Answer 2

The following Perl script matches everything between the .otros{ line and the top: line and replaces the top: line by top: 70%;:

perl -pe 's/(?!\.otros\{[\w\d\s:;\-%]*)top:.*/top: 70%;/' estilos.css

If the lines between the .otros{ line and the top: line contain anything else than:

• lowercase letters, uppercase letters, underscores (\w)
• numbers (\d)
• whitespace (\s)
• colon (:)
• semicolon (;)
• dash (\-)
• percent symbol (%)

just add it between the square brackets ([]).

The result is:

.social a:not(:hover){
    width: 70px;
    -webkit-transition: 600ms;
    -o-transition: 600ms;
    -ms-transition: 600ms;
}
.social div a:not(:hover){
    width:200%;
}
.otros{
    position: fixed;
    top: 70%;
    z-index: 100;
    left: 0;
}

Note: This script does not replace top: 116px; only, but everything after top: (top:.*) inside .otros. For example, it would also replace top: 55px; or top: 90%;.

If you just need to replace top: 116px;, then the command would be this:

perl -pe 's/(?!\.otros\{[a-zA-Z0-9\s:;\-%]*)top: 116px;/top: 70%;/' estilos.css